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

Interaction

Read this handy introduction to HTML attributes and DOM properties

Click menu button to open Drawer

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

Web Component
HTML Blueprint

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().

<!-- Trigger -->
<chi-button id="drawer-trigger" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

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

<!-- JavaScript -->
<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.

<!-- Trigger -->
<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>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-1" class="chi-drawer -left">
      <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>

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

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-2" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

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

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-2');
  var drawerTrigger = document.getElementById('drawer-trigger-2');
  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.

<!-- Trigger -->
<button id="drawer-trigger-3" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-3" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div id="drawer-3" class="chi-drawer -left">
  <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-3'));</script>

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-4" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

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

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-4');
  var drawerTrigger = document.getElementById('drawer-trigger-4');
  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.

<!-- Trigger -->
<button id="drawer-trigger-5" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-5" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div id="drawer-5" 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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-5'));</script>

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-6" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

<!-- Drawer -->
<chi-drawer id="interactive-drawer-6" position="top">
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-6');
  var drawerTrigger = document.getElementById('drawer-trigger-6');
  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.

<!-- Trigger -->
<button id="drawer-trigger-7" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-7" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div id="drawer-7" class="chi-drawer -top">
  <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-7'));</script>

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-8" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

<!-- Drawer -->
<chi-drawer id="interactive-drawer-8" position="bottom">
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-8');
  var drawerTrigger = document.getElementById('drawer-trigger-8');
  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.

<!-- Trigger -->
<button id="drawer-trigger-9" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-9" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div id="drawer-9" class="chi-drawer -bottom">
  <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-9'));</script>

Backdrop

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

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-10" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

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

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-10');
  var drawerTrigger = document.getElementById('drawer-trigger-10');
  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.

<!-- Trigger -->
<button id="drawer-trigger-11" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-11" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-11" class="chi-drawer -bottom">
      <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-11'));</script>

Titled

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-12" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

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

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-12');
  var drawerTrigger = document.getElementById('drawer-trigger-12');
  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.

<!-- Trigger -->
<button id="drawer-trigger-13" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-13" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-13" class="chi-drawer -left">
      <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-13'));</script>

Close button

Close buttons provide users with a consistent way to exit Drawers. For special cases, such as requiring users to perform a task that auto-closes the Drawer when complete, a close button may be removed.

Closable
Non closable

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-14" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

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

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-14');
  var drawerTrigger = document.getElementById('drawer-trigger-14');
  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.

<!-- Trigger -->
<button id="drawer-trigger-15" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-15" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-15" class="chi-drawer -left">
      <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-15'));</script>

Drawer content here

Web Component
HTML Blueprint

Use the non-closable attribute to render Drawer without a close button

<!-- Trigger -->
<chi-button id="drawer-trigger-16" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

<!-- Drawer -->
<chi-drawer id="interactive-drawer-16" position="left" backdrop non-closable>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-16');
  var drawerTrigger = document.getElementById('drawer-trigger-16');
  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.

<!-- Trigger -->
<button id="drawer-trigger-17" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-17" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-17" class="chi-drawer -left">
      <div class="chi-drawer__header"></div>
      <div class="chi-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-17'));</script>

Header

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

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-18" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

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

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-18');
  var drawerTrigger = document.getElementById('drawer-trigger-18');
  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.

<!-- Trigger -->
<button id="drawer-trigger-19" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-19" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-19" class="chi-drawer -left">
      <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-19'));</script>

Drawer content here

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="drawer-trigger-20" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

<!-- Drawer -->
<chi-drawer id="interactive-drawer-20" position="left" backdrop no-header>
  <div class="-px--2 -text">Drawer content here</div>
</chi-drawer>

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-20');
  var drawerTrigger = document.getElementById('drawer-trigger-20');
  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.

<!-- Trigger -->
<button id="drawer-trigger-21" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-21" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-21" class="chi-drawer -left">
      <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>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-21'));</script>

Portal

Drawer content here

Web Component
HTML Blueprint

Use the attribute portal to enable portal styling.

<!-- Trigger -->
<chi-button id="drawer-trigger-22" color="primary">Launch demo drawer</chi-button>

<!-- Drawer -->
<chi-drawer id="interactive-drawer-22" position="bottom" title="Drawer title here" portal backdrop prevent-auto-hide>
  <div class="-p--2 -text">Drawer content here</div>
</chi-drawer>

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('interactive-drawer-22');
  var drawerTrigger = document.getElementById('drawer-trigger-22');
  drawerTrigger.addEventListener('click', function(){
    drawer.toggle();
    // or drawer.active = !drawer.active;
  });
</script>

Use the class -portal to enable portal styling.

<!-- Trigger -->
<button id="drawer-trigger-23" class="chi-button -primary chi-drawer__trigger" data-target="#drawer-23">Launch demo drawer</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer-23" class="chi-drawer -bottom -portal">
      <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="-p--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-23'));</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`
`portal`	`portal`	to define portal style of the Drawer header	`boolean`	`false`
`position`	`position`	to set position of the drawer { top, right, bottom or left }	`string`	undefined
`preventAutoHide`	`prevent-auto-hide`	to prevent closing when the user clicked outside the Drawer	`boolean`	`false`
`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.
`preventAutoHide`	`false`	Set `preventAutoHide` to `true` to prevent hidding the drawer when clicking outside the drawer.

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