Sidenav

Use sidenav to add a responsive multi-level navigation menu to your project.

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.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<aside class="chi-sidenav" id="sidenav-0">
  <div class="chi-sidenav__content">
    <nav>
      <ul class="chi-sidenav__list">
        <li class="-active">
          <a href="#drawer-0-1">
            <i class="chi-icon icon-atom"></i>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-0-2">
            <i class="chi-icon icon-atom"></i>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="chi-sidenav__drawers">
    <div class="chi-drawer -animated -left" id="drawer-0-1">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 1</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-1-A">
              <div class="chi-sidenav__title">Title A</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-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="chi-sidenav__title">Title B</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title C
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title D
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="chi-drawer -animated -left" id="drawer-0-2">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 2</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-2-A">
              <div class="chi-sidenav__title">Title E</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#drawer-item-list-2-B">
              <div class="chi-sidenav__title">Title F</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title G
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title H
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

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

Inverse

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.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<aside class="chi-sidenav -inverse" id="sidenav-1">
  <div class="chi-sidenav__content">
    <nav>
      <ul class="chi-sidenav__list">
        <li class="-active">
          <a href="#drawer-1-1">
            <i class="chi-icon icon-atom"></i>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-1-2">
            <i class="chi-icon icon-atom"></i>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="chi-sidenav__drawers">
    <div class="chi-drawer -animated -left" id="drawer-1-1">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 1</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-1-A">
              <div class="chi-sidenav__title">Title A</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-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="chi-sidenav__title">Title B</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title C
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title D
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="chi-drawer -animated -left" id="drawer-1-2">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 2</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-2-A">
              <div class="chi-sidenav__title">Title E</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#drawer-item-list-2-B">
              <div class="chi-sidenav__title">Title F</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title G
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title H
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

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

Open on hover

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.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<aside class="chi-sidenav -inverse" id="sidenav-1">
  <div class="chi-sidenav__content">
    <nav>
      <ul class="chi-sidenav__list">
        <li class="-active">
          <a href="#drawer-1-1">
            <i class="chi-icon icon-atom"></i>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-1-2">
            <i class="chi-icon icon-atom"></i>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="chi-sidenav__drawers">
    <div class="chi-drawer -animated -left" id="drawer-1-1">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 1</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-1-A">
              <div class="chi-sidenav__title">Title A</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-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="chi-sidenav__title">Title B</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title C
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title D
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="chi-drawer -animated -left" id="drawer-1-2">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 2</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-2-A">
              <div class="chi-sidenav__title">Title E</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#drawer-item-list-2-B">
              <div class="chi-sidenav__title">Title F</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title G
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title H
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

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

Active Usage

The -active class can be applied to ul.chi-sidenav__list > li for activating the elements in the sidenav menu, .drawer for opening the drawer, and ul.chi-sidenav__drawer-list > li for activating the menu items inside the drawer.

Sizes

Sidenav supports the following sizes: -sm, -md and -lg. The default size is -md.

-sm

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.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<aside class="chi-sidenav -sm" id="sidenav-3">
  <div class="chi-sidenav__content">
    <nav>
      <ul class="chi-sidenav__list">
        <li class="-active">
          <a href="#drawer-0-1">
            <i class="chi-icon icon-atom"></i>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-0-2">
            <i class="chi-icon icon-atom"></i>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="chi-sidenav__drawers">
    <div class="chi-drawer -animated -left" id="drawer-0-1">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 1</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-1-A">
              <div class="chi-sidenav__title">Title A</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-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="chi-sidenav__title">Title B</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title C
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title D
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="chi-drawer -animated -left" id="drawer-0-2">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 2</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-2-A">
              <div class="chi-sidenav__title">Title E</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#drawer-item-list-2-B">
              <div class="chi-sidenav__title">Title F</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title G
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title H
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

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

-md

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.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<aside class="chi-sidenav -md" id="sidenav-4">
  <div class="chi-sidenav__content">
    <nav>
      <ul class="chi-sidenav__list">
        <li class="-active">
          <a href="#drawer-0-1">
            <i class="chi-icon icon-atom"></i>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-0-2">
            <i class="chi-icon icon-atom"></i>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="chi-sidenav__drawers">
    <div class="chi-drawer -animated -left" id="drawer-0-1">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 1</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-1-A">
              <div class="chi-sidenav__title">Title A</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-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="chi-sidenav__title">Title B</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title C
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title D
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="chi-drawer -animated -left" id="drawer-0-2">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 2</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-2-A">
              <div class="chi-sidenav__title">Title E</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#drawer-item-list-2-B">
              <div class="chi-sidenav__title">Title F</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title G
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title H
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

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

-lg

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.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<aside class="chi-sidenav -lg" id="sidenav-5">
  <div class="chi-sidenav__content">
    <nav>
      <ul class="chi-sidenav__list">
        <li class="-active">
          <a href="#drawer-0-1">
            <i class="chi-icon icon-atom"></i>
            <span>Active Item</span>
          </a>
        </li>
        <li>
          <a href="#drawer-0-2">
            <i class="chi-icon icon-atom"></i>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="chi-sidenav__drawers">
    <div class="chi-drawer -animated -left" id="drawer-0-1">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 1</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-1-A">
              <div class="chi-sidenav__title">Title A</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-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="chi-sidenav__title">Title B</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title C
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title D
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="chi-drawer -animated -left" id="drawer-0-2">
      <div class="chi-drawer__header">
        <div class="chi-drawer__title">Menu item 2</div>
        <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">
        <ul class="chi-sidenav__drawer-list">
          <li>
            <a href="#drawer-item-list-2-A">
              <div class="chi-sidenav__title">Title E</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#drawer-item-list-2-B">
              <div class="chi-sidenav__title">Title F</div>
            </a>
            <div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
              <ul class="chi-tabs -vertical -sm">
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab A
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab B
                  </a>
                </li>
                <li>
                  <a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
                    Sub tab C
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title G
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#exampleHashTarget">
              <span class="chi-sidenav__title">
                Title H
                <i class="chi-icon icon-external-link -xs"></i>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

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

Recommended layout

Use this layout to ensure the sidenav renders correctly in your project.

<div class="-d--flex">
  <aside class="chi-sidenav -flex--shrink0">
    <!-- Sidenav content goes here -->
  </aside>
  <div class="-flex--grow1">
    <!-- Page content goes here -->
  </div>
</div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon