Skip to content
Airframe

Side Navigation

Side navigation menu for hierarchical navigation.

Markup

Section titled “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>

Wrap visible text in af-side-nav-label when the link also has an icon. App shell hides those labels from lg up when the shell is af-is-collapsed.

<nav>
  <ul class="af-side-nav">
    <li class="af-side-nav-item">
      <a href="#" class="af-side-nav-link" aria-current="page">
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
        </svg>
        <span class="af-side-nav-label">Home</span>
      </a>
    </li>
    <li class="af-side-nav-item">
      <a href="#" class="af-side-nav-link">
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.64l-1.92-3.32a.49.49 0 0 0-.6-.22l-2.39.96a7.2 7.2 0 0 0-1.63-.94l-.36-2.54A.49.49 0 0 0 14.9 2h-3.84a.49.49 0 0 0-.48.42l-.36 2.54c-.59.22-1.14.53-1.63.94l-2.39-.96a.49.49 0 0 0-.6.22L3.68 8.48a.49.49 0 0 0 .12.64l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94L3.8 14.16a.49.49 0 0 0-.12.64l1.92 3.32c.13.23.4.32.64.22l2.39-.96c.5.41 1.04.72 1.63.94l.36 2.54c.05.24.25.42.48.42h3.84c.24 0 .44-.18.48-.42l.36-2.54c.59-.22 1.14-.53 1.63-.94l2.39.96c.24.1.51 0 .64-.22l1.92-3.32a.49.49 0 0 0-.12-.64l-2.03-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/>
        </svg>
        <span class="af-side-nav-label">Settings</span>
      </a>
    </li>
  </ul>
</nav>
Section titled “Related”