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.

Examples

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.
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.
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
<chi-drawer position="left" active>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-drawer -left -active">
  <div class="chi-drawer__header">
    <button class="chi-button -icon -close" aria-label="Close">
      <div class="chi-button__content">
        <i class="chi-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="chi-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>
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.
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.
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
<chi-drawer position="right" active>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-drawer -right -active">
  <div class="chi-drawer__header">
    <button class="chi-button -icon -close" aria-label="Close">
      <div class="chi-button__content">
        <i class="chi-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="chi-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>
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.
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.
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
<chi-drawer position="top" active>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-drawer -top -active">
  <div class="chi-drawer__header">
    <button class="chi-button -icon -close" aria-label="Close">
      <div class="chi-button__content">
        <i class="chi-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="chi-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>
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.
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.
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
<chi-drawer position="bottom" active>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-drawer -bottom -active">
  <div class="chi-drawer__header">
    <button class="chi-button -icon -close" aria-label="Close">
      <div class="chi-button__content">
        <i class="chi-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="chi-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
<chi-drawer position="bottom" backdrop active>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -bottom -active">
      <button class="chi-button -icon -close" aria-label="Close">
        <div class="chi-button__content">
          <i class="chi-icon icon-x"></i>
        </div>
      </button>
      <div class="chi-drawer__content -d--flex -align-items--center -justify-content--center">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

Titled

Drawer content here
<chi-drawer position="left" title="Drawer title here" backdrop active>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -left -active">
      <div class="chi-drawer__header">
        <span class="chi-drawer__title">
          Drawer title here
        </span>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </div>
      <div class="chi-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

Close button

Drawer content here
By default Drawer includes a close button
<chi-drawer position="left" active backdrop>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -bottom -active">
      <button class="chi-button -icon -close" aria-label="Close">
        <div class="chi-button__content">
          <i class="chi-icon icon-x"></i>
        </div>
      </button>
      <div class="chi-drawer__content -d--flex -align-items--center -justify-content--center">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>
Drawer content here
Use the non-closable attribute to render Drawer without a close button
<chi-drawer position="left" active backdrop non-closable>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -bottom -active">
      <div class="chi-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
<chi-drawer position="left" active backdrop>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -left -active">
      <div class="chi-drawer__header">
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </div>
      <div class="chi-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>
Drawer content here
<chi-drawer position="left" active backdrop no-header>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -left -active">
      <button class="chi-button -icon -close" aria-label="Close">
        <div class="chi-button__content">
          <i class="chi-icon icon-x"></i>
        </div>
      </button>
      <div class="chi-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

Interaction

Read this handy introduction to HTML attributes and DOM properties

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.

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
Modify the active attribute or property to make the drawer show or hide. The chi-drawer element also has three public methods to interact with it: show(), hide(), toggle().
<chi-button id="drawer-trigger" type="icon">
  <chi-icon icon="menu"></chi-icon>
</chi-button>

<chi-drawer id="interactive-drawer" position="right" backdrop>
  <div class="-px--2 -text">Drawer content here</div>
</div>

<script>
  var drawer = document.getElementById('interactive-drawer');
  var drawerTrigger = document.getElementById('drawer-trigger');
  drawerTrigger.addEventListener('click', function(){
    drawer.toggle();
    // or drawer.active = !drawer.active;
  });
</script>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

Use the function chi.drawer(elem) to instantiate a new drawer component in the DOM element passed as a parameter. You must use the trigger element as the parameter.
<button id="drawer-trigger-1" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-1" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-1" class="chi-drawer -right">
      <div class="chi-drawer__header">
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </div>
      <div class="chi-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<script>chi.drawer(document.getElementById('drawer-trigger-1'));</script>

Web Component

Properties

Property
Attribute
Description
Type
Default
active
active
to open or close the drawer
boolean
undefined
backdrop
backdrop
to add a backdrop behind the drawer, which covers the viewport
string
undefined
noHeader
no-header
to remove the space for the header
boolean
undefined
nonClosable
non-closable
To render Drawer without a close button
boolean
false
position
position
to set position of the drawer { top, right, bottom or left }
string
undefined
title
title
to define drawer title. Not compatible with no-header
string
undefined

Events

Event
Description
Type
chiDrawerHidden
Drawer has been hidden to the user. The animation has completed.
CustomEvent<any>
chiDrawerHide
Drawer hide method has executed, but the closing animation has not started yet
CustomEvent<any>
chiDrawerShow
Drawer show method has executed, but the showing animation has not started yet
CustomEvent<any>
chiDrawerShown
Drawer has been shown to the user and is fully visible. The animation has completed.
CustomEvent<any>

Methods

Method
Description
Returns
Parameters
hide() => Promise<void>
Hides the drawer

Type: Promise<void>

-
show() => Promise<void>
Shows the drawer.

Type: Promise<void>

-
toggle() => Promise<void>
Toggles active state (show/hide)

Type: Promise<void>

-

JavaScript

This component accepts options to configure its behavior.

Option
Default
Description
animated
true
Enables animation on drawer display and hide, and fade effect in the backdrop.
target
null
Lets the developer referer the target programmatically instead of by data-target attribute. It accepts Element object and xpath selector string.

Methods

Method
Description
Returns
hide() => void
Hides the drawer
Type: void
show() => void
Shows the drawer
Type: void
toggle() => void
Toggles active state (show/hide)
Type: void

Preventing memory leaks

Drawer components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('drawer-1');
var drawer = chi.drawer(elem);
// do stuff
drawer.dispose();

It is safe to call the drawer method more than once, as it will return any previously created drawer component associated to the trigger.

var elem = document.getElementById('drawer-2');
var drawer = chi.drawer(elem);
var elem2 = document.getElementById('drawer-2');
var drawer2 = chi.drawer(elem2);
drawer === drawer2; // returns true

drawer.dispose(); // Only have to do it once.

Accessibility

Accessibility guidelines coming soon