Side Navigation

Side navigation menu for hierarchical navigation.

Markup

<nav>
  <ul class="af-side-nav">
    <li class="af-side-nav-item">
      <a href="#" class="af-side-nav-link" aria-current="page">
        Active Item
      </a>
    </li>
    <li class="af-side-nav-item">
      <a href="#" class="af-side-nav-link">
        Item 2
      </a>
    </li>
    <li class="af-side-nav-item">
      <a href="#" class="af-side-nav-link">
        Item 3
      </a>
    </li>
  </ul>
</nav>

Live example

• Active Item

• Item 2

• Item 3