Chi · Sidenav

Sidenav

Use the sidenav to add a navigation menu with a drawer for deeper navigation. This JavaScript module depends on the drawer component for the second level of the menu. You can initiate this component by calling chi.sidenav(document.querySelector('.m-sidenav'));

Examples

Base

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML
JS

<aside id="sidenav-0" class="m-sidenav">
  <div class="m-sidenav__content">
    <nav>
      <ul class="m-sidenav__list">
        <li class="-active">
          <a href="#drawer-0-1">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-0-2">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Menu Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-0-3">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Menu Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-0-4">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="m-sidenav__drawers">
    <div class="m-drawer -left" id="drawer-0-1">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title A</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li class="-active">
            <a href="#">
              <h5 class="m-sidenav__title">Title B</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title C</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title D</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-drawer -left" id="drawer-0-2">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title E</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title F</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title G</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title H</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-drawer -left" id="drawer-0-3">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title I</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title J</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title K</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title L</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-drawer -left" id="drawer-0-4">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title M</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title N</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title O</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title P</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

<script>chi.sidenav(document.getElementById('sidenav-0'));</script>

Options

This component accepts options to configure its behavior.

Option	Default	Description
`animated`	`true`	Enables animation on drawer display and hide, and sliding border.
`autoClose`	`false`	Lets the developer specify a number of milliseconds after the drawer will close automatically.

<aside id="sidenav-1" class="m-sidenav">
  <div class="m-sidenav__content">
    <nav>
      <ul class="m-sidenav__list">
        <li class="-active">
          <a href="#drawer-1-1">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-1-2">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Menu Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-1-3">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Menu Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-1-4">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="m-sidenav__drawers">
    <div class="m-drawer -left" id="drawer-1-1">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title A</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li class="-active">
            <a href="#">
              <h5 class="m-sidenav__title">Title B</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title C</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title D</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-drawer -left" id="drawer-1-2">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title E</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title F</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title G</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title H</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-drawer -left" id="drawer-1-3">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title I</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title J</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title K</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title L</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-drawer -left" id="drawer-1-4">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close">
          <div class="a-btn__content"><i class="a-icon icon-x"></i></div>
        </button>
      </div>
      <div class="m-drawer__content">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title M</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <h5 class="m-sidenav__title">Title N</h5>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title O</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="m-sidenav__title">Title P</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

<script>
  chi.sidenav(
    document.getElementById('sidenav-1'),
    {
      autoClose: 2000
    }
  );
</script>

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

TipIt 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.