Menu Bar

The MenuBar component displays links in a horizontal row, each occupying equal space. It mimics many of the dimensions and other visual qualities of MegaMenu but in a more subdued fashion, useful for in-page navigation (fewer than three items) such as quick links or tabs.

Default

The default appearance is ideal for white backgrounds.

Add aria-selected="true" to a MenuBar-link to give it a tab-like selected appearance.

<ul class="MenuBar ">
  <li class="MenuBar-item">
    <a class="MenuBar-link " href="#" aria-selected="true">
        Label
  </a>
  </li>
  <li class="MenuBar-item">
    <a class="MenuBar-link " href="#" >
        Label
  </a>
  </li>
  <li class="MenuBar-item">
    <a class="MenuBar-link " href="#" >
        Label
  </a>
  </li>
</ul>

Modifier: Bright

Add the MenuBar--bright modifier to give the MenuBar a lighter appearance, which works well against silver containers.

With Optional Icons

Add Icon elements with the MenuBar-icon class, intended for use within MenuBar-link elements. For the best appearance, wrap adjacent text in a MenuBar-label element.

You can color icons using u-text* utilities, but those customizations will be overridden in cases where the combination might appear ugly, such as selected tabs or hover/focus states.

<ul class="MenuBar MenuBar--bright">
  <li class="MenuBar-item">
    <a class="MenuBar-link " href="#" aria-selected="true">
      <svg width="20" height="20" viewBox="0 0 20 20" class="Icon MenuBar-icon u-textBlue">
  <path d="M15.09,2H4.91A2.89,2.89,0,0,0,2,4.88V14.1A2.89,2.89,0,0,0,4.91,17H6.46A3.8,3.8,0,0,1,5.8,18.8c-.33.38.22.41.43.36a6.3,6.3,0,0,0,2.23-1.3L9.24,17h5.85A2.89,2.89,0,0,0,18,14.1V4.88A2.89,2.89,0,0,0,15.09,2ZM10.92,13.88a.6.6,0,0,1-.6.6H8.83a.6.6,0,0,1-.6-.6v-1.1a.6.6,0,0,1,.6-.6h1.5a.6.6,0,0,1,.6.6Zm3-5.93c0,.93-.66,1.42-2,2.28l-.77.49a.32.32,0,0,0-.17.3v.27H8.83a.6.6,0,0,1-.6-.6v0c0-1,1-1.63,2.06-2.35L11,7.83a.36.36,0,0,0,.17-.32V7a.26.26,0,0,0-.26-.26H9.06A.26.26,0,0,0,8.8,7v.26a.6.6,0,0,1-.6.6H6.71a.6.6,0,0,1-.6-.6V6.4A2,2,0,0,1,8.06,4.45h3.88A2,2,0,0,1,13.89,6.4Z"/>
</svg>
      <span class="MenuBar-label">
          Label
      </span>
  </a>
  </li>
  <li class="MenuBar-item">
    <a class="MenuBar-link " href="#" >
      <svg width="20" height="20" viewBox="0 0 20 20" class="Icon MenuBar-icon u-textBlue">
  <path d="M15.09,2H4.91A2.89,2.89,0,0,0,2,4.88V14.1A2.89,2.89,0,0,0,4.91,17H6.46A3.8,3.8,0,0,1,5.8,18.8c-.33.38.22.41.43.36a6.3,6.3,0,0,0,2.23-1.3L9.24,17h5.85A2.89,2.89,0,0,0,18,14.1V4.88A2.89,2.89,0,0,0,15.09,2ZM10.92,13.88a.6.6,0,0,1-.6.6H8.83a.6.6,0,0,1-.6-.6v-1.1a.6.6,0,0,1,.6-.6h1.5a.6.6,0,0,1,.6.6Zm3-5.93c0,.93-.66,1.42-2,2.28l-.77.49a.32.32,0,0,0-.17.3v.27H8.83a.6.6,0,0,1-.6-.6v0c0-1,1-1.63,2.06-2.35L11,7.83a.36.36,0,0,0,.17-.32V7a.26.26,0,0,0-.26-.26H9.06A.26.26,0,0,0,8.8,7v.26a.6.6,0,0,1-.6.6H6.71a.6.6,0,0,1-.6-.6V6.4A2,2,0,0,1,8.06,4.45h3.88A2,2,0,0,1,13.89,6.4Z"/>
</svg>
      <span class="MenuBar-label">
          Label
      </span>
  </a>
  </li>
  <li class="MenuBar-item">
    <a class="MenuBar-link " href="#" >
      <svg width="20" height="20" viewBox="0 0 20 20" class="Icon MenuBar-icon u-textBlue">
  <path d="M15.09,2H4.91A2.89,2.89,0,0,0,2,4.88V14.1A2.89,2.89,0,0,0,4.91,17H6.46A3.8,3.8,0,0,1,5.8,18.8c-.33.38.22.41.43.36a6.3,6.3,0,0,0,2.23-1.3L9.24,17h5.85A2.89,2.89,0,0,0,18,14.1V4.88A2.89,2.89,0,0,0,15.09,2ZM10.92,13.88a.6.6,0,0,1-.6.6H8.83a.6.6,0,0,1-.6-.6v-1.1a.6.6,0,0,1,.6-.6h1.5a.6.6,0,0,1,.6.6Zm3-5.93c0,.93-.66,1.42-2,2.28l-.77.49a.32.32,0,0,0-.17.3v.27H8.83a.6.6,0,0,1-.6-.6v0c0-1,1-1.63,2.06-2.35L11,7.83a.36.36,0,0,0,.17-.32V7a.26.26,0,0,0-.26-.26H9.06A.26.26,0,0,0,8.8,7v.26a.6.6,0,0,1-.6.6H6.71a.6.6,0,0,1-.6-.6V6.4A2,2,0,0,1,8.06,4.45h3.88A2,2,0,0,1,13.89,6.4Z"/>
</svg>
      <span class="MenuBar-label">
          Label
      </span>
  </a>
  </li>
</ul>

Modifier: Progress

To display the bar as a progress indicator, use the MenuBar--progress class on the parent element, and be sure to include MenuBar-divider SVG elements (which will inherit transitions and colors from MenuBar-link).

The current step is still indicated by [aria-selected="true"], but previous steps must be indicated via the is-complete state class.

  1. Step 1
  2. Step 2
  3. Step 3 
<ol class="MenuBar MenuBar--progress">
  <li class="MenuBar-item">
    <a class="MenuBar-link is-complete" href="#" >
        Step 1
      <svg width="54" height="100" viewBox="0 0 54 100" preserveAspectRatio="none" class="MenuBar-divider">
  <polygon points="-20,-2 2,-2 52,50 2,102 -20,102"/>
</svg>
  </a>
  </li>
  <li class="MenuBar-item">
    <a class="MenuBar-link " href="#" aria-selected="true">
        Step 2
      <svg width="54" height="100" viewBox="0 0 54 100" preserveAspectRatio="none" class="MenuBar-divider">
  <polygon points="-20,-2 2,-2 52,50 2,102 -20,102"/>
</svg>
  </a>
  </li>
  <li class="MenuBar-item">
    <span class="MenuBar-link " href="#">
      Step 3
    </span>
  </li>
</ol>

Modifier: Compact

The MenuBar--compact modifier class reduces the height of the bar, making it closer in appearance to a Button than to navigation elements. This can be combined with any other stylistic modifier.

Modifier: Rounded

The MenuBar--rounded modifier class adds rounded corners, ideal for when the bar won't visually meet the viewport edges. This can be combined with any other stylistic modifier.