Horizontal nav

A horizonal navigation bar used for navigating section subpages. Overflow creates a horizontal scroll.

Variants

Regular horizontal-nav
  • 

    <nav class="horizontal-nav">
  <ul class="horizontal-nav__list">
    <li class="nav-item active">
      <a href="#">User Profile</a>
    </li>
    <li class="nav-item">
      <a href="#">Security</a>
    </li>
    <li class="nav-item">
      <a href="#">Permissions</a>
    </li>
    <li class="nav-item">
      <a href="#">Contact Information</a>
    </li>
  </ul>
</nav>

Usage

When to use it

This component is used for navigating subpages when a section has more than one major section.

Class Name Description
horizonal-nav

Block-level class
horizonal-nav__list

This class is applied to the <ul> inside which the nav-items exist.