Menus

Sitenav

The sitenav sits in the left column of the website, within the .o-layout-main-nav section of the grid system. The grid system page also documents how to omit the sitenav from the layout.

On tablet and mobile resolution, the sitenav moves to above the content area and is a collapsible dropdown menu.

JavaScript class: .js-sitenav and .js-sitenav__toggle

<nav class="c-sitenav js-sitenav" aria-label="Site Menu" role="navigation">
  <div class="c-sitenav__toggle js-sitenav__toggle"><a href="#0" class="c-sitenav__item-link"><i class="ua-icon-menu"></i> Site Menu</a></div>
  <ul class="c-sitenav__level-1">
    <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">First Level</a></li>
    <li class="c-sitenav__item c-sitenav__current"><a href="#0" class="c-sitenav__item-link">First Level - Current</a>
      <ul class="c-sitenav__level-2">
        <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Second Level</a></li>
        <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Second Level</a>
          <ul class="c-sitenav__level-3">
            <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Third Level</a></li>
            <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Third Level</a>
              <ul class="c-sitenav__level-4">
                <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Fourth Level</a></li>
                <li class="c-sitenav__item c-sitenav__active"><a href="#0" class="c-sitenav__item-link">Fourth Level - Active</a></li>
                <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Fourth Level</a></li>
              </ul>
            </li>
            <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Third Level</a></li>
          </ul>
        </li>
        <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">Second Level</a></li>
      </ul>
    </li>
    <li class="c-sitenav__item"><a href="#0" class="c-sitenav__item-link">First Level</a></li>
  </ul>
</nav>