HighFive Design System

Side Menu

The side menu is used as a sub menu for sections with multiple pages and depth.

HTML

<div class="menu-side" role="navigation" aria-label="Sidebar navigation for current section">
  <ul class="menu--main nav flex-column">

    <li class="nav-item menu-depth-1">
      <a href="#" class="nav-link">Sub-menu Item 1</a>
    </li>

    <li class="nav-item menu-depth-1">
      <a href="#" class="nav-link">Sub-menu Item 2</a>
    </li>

    <li class="nav-item menu-depth-1">
      <a href="#" class="nav-link">Sub-menu Item 3</a>
    </li>

    <li class="nav-item menu-depth-1">
      <a href="#" class="nav-link">Sub-menu Item 4</a>
    </li>

  </ul>
</div>