Styleguides

Shared Assets & Docs

Menu

Show a simple side navigation with .sidenav. Add an .is-active class to the active link.

<ul class="sidenav">
  <li><a href="#" class="is-active">Home</a></li>
  <li><a href="#">My Doctors</a></li>
</ul>

Nested Sidenav

The Sidenav can contain one level of submenus. Simply add another <ul> of links. You can show the nested links by adding an .is-active class to the parent <li>.

<ul class="sidenav">
  <li class="is-active"> <!-- visible -->
    <a href="#">My Doctors</a>
    <ul>
      <li><a href="#" class="is-active">Doctor 1</a></li>
      <li><a href="#">Doctor 2</a></li>
      <li><a href="#">Doctor 3</a></li>
    </ul>
  </li>
  <li> <!-- not visible -->
    <a href="#">Dependents</a>
    <ul>
      <li><a href="#">Dependent 1</a></li>
      <li><a href="#">Dependent 2</a></li>
      <li><a href="#">Dependent 3</a></li>
    </ul>
  </li>
</ul>