Drawer

A drawer is a container for content that can be collapsed. It should be used for lower priority, non-essential content, or for controls that can safely be hidden if screen space is at a premium.

<div className="rev-ContentWrapper ExampleDrawerContainer">
  <Drawer
    expanderChildren="+"
    closerChildren="+"
  >
    <Menu>
      <Menu.Item text>
        <span>This is a basic drawer. It is the height of it's contents.</span>
      </Menu.Item>
      <Menu.Item>
        <a href="#">one</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">two</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">three</a>
      </Menu.Item>
    </Menu>
  </Drawer>
  <main className="rev-Content">
    <p><Lipsum /></p>
    <p><Lipsum /></p>
  </main>
</div>

<div className="rev-ContentWrapper ExampleDrawerContainer">
  <Drawer
    expanderChildren="+"
    closerChildren="+"
  >
    <Menu>
      <Menu.Item text>
        <span>This is a basic drawer. It is the height of it's contents.</span>
      </Menu.Item>
      <Menu.Item>
        <a href="#">one</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">two</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">three</a>
      </Menu.Item>
    </Menu>
  </Drawer>
  <main className="rev-Content">
    <p><Lipsum /></p>
    <p><Lipsum /></p>
  </main>
</div>

<div className="rev-ContentWrapper ExampleDrawerContainer">
  <Drawer
    scroll
    expanderChildren="+"
    closerChildren="+"
  >
    <Menu>
      <Menu.Item text>
        <span>This drawer's contents will scroll vertically.</span>
      </Menu.Item>
      <Menu.Item>
        <a href="#">one</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">two</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">three</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">four</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">five</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">six</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">seven</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">eight</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">nine</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">ten</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">eleven</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">twelve</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">thirteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">fourteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">fifteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">sixteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">seventeen</a>
      </Menu.Item>
    </Menu>
  </Drawer>
  <main className="rev-Content">
    <p><Lipsum /></p>
    <p><Lipsum /></p>
  </main>
</div>

<div className="rev-ContentWrapper ExampleDrawerContainer">
  <Drawer
    scroll
    expanderChildren="+"
    closerChildren="+"
  >
    <Menu>
      <Menu.Item text>
        <span>This drawer's contents will scroll vertically.</span>
      </Menu.Item>
      <Menu.Item>
        <a href="#">one</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">two</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">three</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">four</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">five</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">six</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">seven</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">eight</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">nine</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">ten</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">eleven</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">twelve</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">thirteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">fourteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">fifteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">sixteen</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">seventeen</a>
      </Menu.Item>
    </Menu>
  </Drawer>
  <main className="rev-Content">
    <p><Lipsum /></p>
    <p><Lipsum /></p>
  </main>
</div>

<div className="rev-ContentWrapper ExampleDrawerContainer">
  <Drawer
    open
    collapsible
    overlay
    expanderChildren="+"
    closerChildren="+"
  >
    <Menu>
      <Menu.Item text>
        <span>This is a drawer that is collapsible and it overlays page content.</span>
      </Menu.Item>
      <Menu.Item>
        <a href="#">one</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">two</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">three</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">four</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">five</a>
      </Menu.Item>
    </Menu>
  </Drawer>
  <main className="rev-Content">
    <p><Lipsum /></p>
    <p><Lipsum /></p>
  </main>
</div>

<div className="rev-ContentWrapper ExampleDrawerContainer">
  <Drawer
    open
    collapsible
    overlay
    expanderChildren="+"
    closerChildren="+"
  >
    <Menu>
      <Menu.Item text>
        <span>This is a drawer that is collapsible and it overlays page content.</span>
      </Menu.Item>
      <Menu.Item>
        <a href="#">one</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">two</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">three</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">four</a>
      </Menu.Item>
      <Menu.Item>
        <a href="#">five</a>
      </Menu.Item>
    </Menu>
  </Drawer>
  <main className="rev-Content">
    <p><Lipsum /></p>
    <p><Lipsum /></p>
  </main>
</div>