Navigation

Navigation menus provide easy access to different areas in a website or application.

Class Type
side-nav Sidebar Navigation A class representing a sidebar
<div class="side-nav">
  <div class="side-nav-main">
    <section class="drop-section">
      <ul class="drop-list">
        <li class="drop-list-item">
          <a class="drop-button is-selected" href="">
            <span class="icon-home" aria-hidden="true"></span>
            <span class="text">Menu item</span>
          </a>
        </li>
        <li class="drop-list-item">
          <a class="drop-button" href="">
            <span class="icon-user-group" aria-hidden="true"></span>
            <span class="text">Menu item</span>
          </a>
        </li>
        <li class="drop-list-item">
          <a class="drop-button" href="">
            <span class="icon-bell" aria-hidden="true"></span>
            <span class="text">Menu item</span>
          </a>
        </li>
        <li class="drop-list-item">
          <a class="drop-button" href="">
            <span class="icon-chart-pie" aria-hidden="true"></span>
            <span class="text">Menu item</span>
          </a>
        </li>
        <li class="drop-list-item">
          <a class="drop-button" href="">
            <span class="icon-document" aria-hidden="true"></span>
            <span class="text">Menu item</span>
          </a>
        </li>
      </ul>
    </section>
  </div>
  <div class="side-nav-bottom">
    <section class="drop-section">
      <a class="drop-button" href="">
        <span class="icon-cog" aria-hidden="true"></span>
        <span class="text">Menu item</span>
      </a>
    </section>
  </div>
</div>