Sidenav

Use the sidenav to add a navigation menu with a drawer for deeper navigation. It responds differently to three different media queries for screen sizes. In the smallest one, only the icon is visible.

This component requires Javascript

Examples

Base

You can use the -active class in the following elements:

ul.m-sidenav__list > li
For activating the elements in the sidenav menu.
.drawer
For opening the drawer (View drawer documentation)
ul.m-sidenav__drawer-list > li
For activating the menu items inside the drawer.

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.

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">
  <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 -active" 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>

Recommended layout

You can use this layout to ensure the sidenav works correctly.

<div class="-d--flex">
  <aside class="m-sidenav -flex--shrink0">
    [ Sidenav content ]
  </aside>
  <div class="-flex--grow1">
    [ Page content ]
  </div>
</div>

Aditional sidenav content

It is possible to include additional content above and below the menu in the side bar. You will have to develop the responsive behavior of any added content. Put your content inside m-sidenav__content, above and/or below the nav element.

TipYou can use the Flex utility classes to position the elements inside m-sidenav__content.

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.

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">
  <div class="m-sidenav__content -d--flex -flex--column">
    <div class="-d--flex -flex--column -flex-lg--row -align-items--center -p--2">
      <div class="a-avatar -mr-lg--2">
        <img src="../../assets/images/avatar.jpg" alt="User name">
      </div>
      <span class="-text -d--none -d-md--block" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">User name</span>
    </div>
    <nav class="-flex--grow1">
      <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-4">
            <div class="a-icon">
              <svg><use xlink:href="#icon-atom"></use></svg>
            </div>
            <span>Menu Item</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="-d--flex -flex--column -flex-lg--row -align-items--center -p--2 -bt--1">
      <div class="a-avatar -mr-lg--2">
        <img src="../../assets/images/avatar.jpg" alt="User name">
      </div>
      <span class="-text -d--none -d-md--block" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">User name</span>
    </div>
  </div>
  <div class="m-sidenav__drawers">
    [ ... ]
  </div>
</aside>