Drawers

Slide in menus, but "menus" was already taken so welcome to drawers.

Basic Drawer

Your basic drawer will appear from the bottom of the container. The container should have overflow:hidden or you'll see the drawer sliding around.

To make the drawer appear and disappear toggle the visible modifier.

<Drawer>
 <Heading size="small">Drawer header</Heading>
  <Menu>
    <Menu.Item>Drawer c-menu</Menu.Item>
    <Menu.Item>Item two</Menu.Item>
    <Menu.Item>Item three</Menu.Item>
    <Menu.Item>Item four</Menu.Item>
  </Menu>
  <Drawer.Body>
    Drawer body
  </Drawer.Body>
</Drawer>

Positions

.c-drawer--top, .c-drawer--right, .c-drawer--left and .c-drawer--bottom modifiers are all available.

.c-drawer--left

<div class="c-overlay"></div>
<div class="c-drawer c-drawer--left c-drawer--visible">
  <h4 class="c-heading c-heading--xsmall">Drawer header</h4>

  <ul class="c-menu">
    <li class="c-menu__item">Drawer c-menu</li>
    <li class="c-menu__item">Item two</li>
    <li class="c-menu__item">Item three</li>
    <li class="c-menu__item">Item four</li>
  </ul>

  <div class="c-drawer__body">
    Drawer body
  </div>

  <div class="c-drawer__footer c-drawer__footer--block">
    <button class="c-button c-button--primary">Done</button>
  </div>
</div>

.c-drawer--top

<div class="c-overlay"></div>
<div class="c-drawer c-drawer--top c-drawer--visible">
  <h4 class="c-heading c-heading--xsmall">Drawer header</h4>

  <ul class="c-menu">
    <li class="c-menu__item">Drawer c-menu</li>
    <li class="c-menu__item">Item two</li>
    <li class="c-menu__item">Item three</li>
    <li class="c-menu__item">Item four</li>
  </ul>

  <div class="c-drawer__body">
    Drawer body
  </div>

  <div class="c-drawer__footer c-drawer__footer--block">
    <button class="c-button c-button--primary">Done</button>
  </div>
</div>

.c-drawer--right

<div class="c-overlay"></div>
<div class="c-drawer c-drawer--right c-drawer--visible">
  <h4 class="c-heading c-heading--xsmall">Drawer header</h4>

  <ul class="c-menu">
    <li class="c-menu__item">Drawer c-menu</li>
    <li class="c-menu__item">Item two</li>
    <li class="c-menu__item">Item three</li>
    <li class="c-menu__item">Item four</li>
  </ul>

  <div class="c-drawer__body">
    Drawer body
  </div>

  <div class="c-drawer__footer c-drawer__footer--block">
    <button class="c-button c-button--primary">Done</button>
  </div>
</div>

Animation

.a-drawer

Apply the .a-drawer class to enable animation on a drawer. To hide and show the drawer toggle the .c-drawer--visible modifier and it will slide in and out.

--slow, --fast

Every animation comes with slow and fast modifiers.