Design Kit

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.

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.

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.

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.

<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" aria-label="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="#">
              <div class="m-sidenav__title">Title A</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li class="-active">
            <a href="#">
              <div class="m-sidenav__title">Title B</div>
              <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" aria-label="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="#">
              <div class="m-sidenav__title">Title E</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="m-sidenav__title">Title F</div>
              <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" aria-label="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="#">
              <div class="m-sidenav__title">Title I</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="m-sidenav__title">Title J</div>
              <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" aria-label="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="#">
              <div class="m-sidenav__title">Title M</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="m-sidenav__title">Title N</div>
              <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>

Enterprise Global Navigation

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.

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.

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.

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.

<aside class="m-sidenav -inverse -global-nav" id="sidenav-global-nav-1">
  <div class="m-sidenav__content">
    <nav>
      <ul class="m-sidenav__list">
        <li class="-active">
          <a href="#drawer-global-nav-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-global-nav-1-2">
            <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 -animated -left" id="drawer-global-nav-1-1">
      <div class="m-drawer__header">
        <div class="a-drawer__title">Menu item 1</div>
        <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">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-1-A">
              <div class="m-sidenav__title">Title A</div>
            </a>
            <div class="m-sidenav__drawer-item-list" id="drawer-item-list-1-A">
              <ul class="a-tabs -vertical -sm">
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="-active -expanded">
            <a href="#drawer-item-list-1-B">
              <div class="m-sidenav__title">Title B</div>
            </a>
            <div class="m-sidenav__drawer-item-list" id="drawer-item-list-1-B">
              <ul class="a-tabs -vertical -sm">
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="m-sidenav__title">
                Title C
                <div class="a-icon -xs">
                  <svg>
                    <use xlink:href="#icon-external-link"></use>
                  </svg>
                </div>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="m-sidenav__title">
                Title D
                <div class="a-icon -xs">
                  <svg>
                    <use xlink:href="#icon-external-link"></use>
                  </svg>
                </div>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-drawer -animated -left" id="drawer-global-nav-1-2">
      <div class="m-drawer__header">
        <div class="a-drawer__title">Menu item 2</div>
        <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">
        <ul class="m-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-2-A">
              <div class="m-sidenav__title">Title E</div>
            </a>
            <div class="m-sidenav__drawer-item-list" id="drawer-item-list-2-A">
              <ul class="a-tabs -vertical -sm">
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#drawer-item-list-2-B">
              <div class="m-sidenav__title">Title F</div>
            </a>
            <div class="m-sidenav__drawer-item-list" id="drawer-item-list-2-B">
              <ul class="a-tabs -vertical -sm">
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="a-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="m-sidenav__title">
                Title G
                <div class="a-icon -xs">
                  <svg>
                    <use xlink:href="#icon-external-link"></use>
                  </svg>
                </div>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="m-sidenav__title">
                Title H
                <div class="a-icon -xs">
                  <svg>
                    <use xlink:href="#icon-external-link"></use>
                  </svg>
                </div>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>
<script>
  chi.sidenav(document.getElementById('sidenav-global-nav-1'), {
    animated: false
  });
</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.

Autoclose

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.

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.

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.

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.

<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" aria-label="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="#">
              <div class="m-sidenav__title">Title A</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li class="-active">
            <a href="#">
              <div class="m-sidenav__title">Title B</div>
              <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" aria-label="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="#">
              <div class="m-sidenav__title">Title E</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="m-sidenav__title">Title F</div>
              <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" aria-label="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="#">
              <div class="m-sidenav__title">Title I</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="m-sidenav__title">Title J</div>
              <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" aria-label="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="#">
              <div class="m-sidenav__title">Title M</div>
              <p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="m-sidenav__title">Title N</div>
              <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.