The Ounce › Style Guide

Sub Navigation

The sub navigation appears on every non-landing page. As the User moves deeper into the site's structure, the navigation conditionally displays the children of the current active item (indicated in orange). Using font weight, rules, and indents, the sidebar navigation can clearly show up to four levels deep.

<nav class="subnavigation">
  <ul>
    <li><a href="#" class="level-1" id="you-are-here">Initiatives<i class="ss-icon subnavigation__icon">navigateright</i></a>
      <ul>
        <li><a href="#">Educare</a></li>
        <li><a href="#">Home Visiting</a></li>
        <li><a href="#">Early Head Start / Head Start</a></li>
        <li><a href="#">Doula</a></li>
      </ul>
    </li>
    <li><a href="#" class="level-1">Research<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
    <li><a href="#" class="level-1">Professional Development<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
    <li><a href="#" class="level-1">Policy / Advocacy<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
    <li><a href="#" class="level-1">Contact Us<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
  </ul>
</nav>