HighFive Design System

Section Menu

The section menu is used as menu for top level menu sections.

HTML

<nav id="section-menu" class="section-menu" aria-label="Navigation menu for current top level section">
  <a class="scroll scroll-left local">
    <span class="fas fa-chevron-left"></span>
    <span class="sr-only">Hover to scroll section menu to the left</span>
  </a>
  <a class="scroll scroll-right local">
    <span class="fas fa-chevron-right"></span>
    <span class="sr-only">Hover to scroll section menu to the right</span>
  </a>
  <div class="container-fluid no-max-width">
    <ul class="menu--section nav flex-row flex-nowrap">
      <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>
      <li class="nav-item menu-depth-1">
        <a href="#" class="nav-link">Sub-Menu Item 5</a>
      </li>
      <li class="nav-item menu-depth-1">
        <a href="#" class="nav-link">Sub-Menu Item 6</a>
      </li>
    </ul>
  </div>
</nav>