Drawer

Drawers are flexible containers anchored to the top, right, bottom, or left of the screen. They are used primarily in Chi for displaying menus on small devices.

This component requires Javascript

Examples

Left
Right
Top
Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.

Drawer content here

<div class="m-drawer -left -active">
  <div class="m-drawer__header">
    <button class="a-btn -icon -close" aria-label="Close">
      <div class="a-btn__content">
        <i class="a-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="m-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>

Drawer content here

<div class="m-drawer -right -active">
  <div class="m-drawer__header">
    <button class="a-btn -icon -close" aria-label="Close">
      <div class="a-btn__content">
        <i class="a-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="m-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>

Drawer content here

<div class="m-drawer -top -active">
  <div class="m-drawer__header">
    <button class="a-btn -icon -close" aria-label="Close">
      <div class="a-btn__content">
        <i class="a-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="m-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>

Drawer content here

<div class="m-drawer -bottom -active">
  <div class="m-drawer__header">
    <button class="a-btn -icon -close" aria-label="Close">
      <div class="a-btn__content">
        <i class="a-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="m-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>

Backdrop

An optional backdrop can be added to focus the users attention on drawer content.

Drawer content here

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <div class="m-drawer -bottom -active">
      <button class="a-btn -icon -close" aria-label="Close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
      <div class="m-drawer__content -d--flex -align-items--center -justify-content--center">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

Header

Header markup is optional. Remove it to make the content fill the drawer.

Drawer content here

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <div class="m-drawer -left -active">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </div>
      <div class="m-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

Drawer content here

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <div class="m-drawer -left -active">
      <button class="a-btn -icon -close" aria-label="Close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
      <div class="m-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>