GNWT Base Theme Style Guide

5.3 navigation.nav-menu Nav menu

Toggle example guides Toggle HTML markup

A "nav menu" is secondary, hierarchical navigation which can be displayed to the side or below the main content.

Markup: navigation/nav-menu/nav-menu.twig
<ul class="nav-menu {{modifier_class}}">
  <li class="nav-menu__item">
    <a href="/" class="nav-menu__link">Home</a>
  </li>
  <li class="nav-menu__item is-collapsed">
    <a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
  </li>
  <li class="nav-menu__item is-expanded is-active-trail">
    <a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
    <ul class="nav-menu">
      <li class="nav-menu__item">
        <a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
      </li>
      <li class="nav-menu__item is-active-trail is-active">
        <a href="#" class="nav-menu__link is-active">Decet</a>
      </li>
      <li class="nav-menu__item is-collapsed">
        <a href="#" class="nav-menu__link">Aliquip Similis</a>
      </li>
    </ul>
  </li>
  <li class="nav-menu__item is-collapsed">
    <a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
  </li>
  <li class="nav-menu__item is-collapsed">
    <a href="#" class="nav-menu__link">Ibidem Sudo</a>
  </li>
</ul>
Source: sass/navigation/nav-menu/_nav-menu.scss, line 1