Utility nav

Default utility nav

HTML


<nav class="orc-c-utility-nav" role="navigation">

  <ul class="orc-c-utility-nav__list">

    <li class="orc-c-utility-nav__item ">
      <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-utility-nav__link">
				<span class="orc-c-utility-nav__link-text">Offers</span>

			</a>
      <!--end orc-c-utility-nav__link-->

    </li>
    <!-- end orc-c-utility-nav__list__item -->
    <li class="orc-c-utility-nav__item ">
      <button href="&#x2F;patterns&#x2F;04-pages-02-login-logout&#x2F;04-pages-02-login-logout.rendered.html" class="orc-c-utility-nav__link" data-analytics-button data-analytics-category='User' data-analytics-label='Log Out' data-post-button data-post-form-selector='[data-logout-form]'>
				<span class="orc-c-utility-nav__link-text">Sign Out</span>

			</button>
      <!--end orc-c-utility-nav__link-->

    </li>
    <!-- end orc-c-utility-nav__list__item -->

  </ul>
  <!-- end orc-c-utility-nav__list -->

</nav>
<!-- end orc-c-utility-nav -->

When to use

Use the utility nav for low-priority items that still need to be part of the primary nav, such as sign in or log out. They’re so-called because users utilize them. These links are stylized in title case, rather than all-caps.

When to consider an alternative

Consider moving low-low-low priority items that don’t serve an important utility to users to the footer nav.

Class Name	Description
`orc-c-utility-nav` Required	Apply to the utility nav’s containing `nav` tag. This helps format utility nav list within.
`orc-c-utility-nav__list` Required	Apply to the `ul` tag within the `orc-c-utility-nav`. This is set to `display: flex` to place utility nav items side-by-side.
`orc-c-utility-nav__item` Required	Apply to each `li` tag within the `orc-c-utility-nav__list`. This contains the links/buttons used for navigation.
`orc-c-utility-nav__link` Required	Apply to the `a` or `button` tag within each `orc-c-utility-nav__item`. Apply to an `a` tag unless there is functionality needed (i.e. logout form submission).
`orc-c-utility-nav__link-text` Required	Apply to `span` to represent the actual text of the utility nav link.

Default utility nav `orc-c-utility-nav`

Usage

When to use

When to consider an alternative