Skip to main contentSkip to site searchSkip to component search
Honeycomb

Nav Horizontal

The "nav horizontal" enables users to navigate between links in a horizontal format.

In page horizontal navigation items. It uses the nav element which requires an accessible label (aria-label) that should be a very short description of the navigation items.

<nav class="flix-nav-horizontal" aria-label="In this page">
  <ul class="flix-nav-horizontal__items">
    <li class="flix-nav-horizontal__item">
      <a class="flix-nav-horizontal__link" href="#">
        <span class="flix-nav-horizontal__text">General infos</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a class="flix-nav-horizontal__link" href="#" aria-current="true">
        <span class="flix-nav-horizontal__text">Sightseeing</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a class="flix-nav-horizontal__link" href="#">
        <span class="flix-nav-horizontal__text">Culture</span>
      </a>
    </li>
  </ul>
</nav>

Modifiers

The nav horizontal supports the following modifiers, that can be combined with each other:

flix-nav-horizontal--stretch
Makes the items stretch and the component fills all available horizontal space.
flix-nav-horizontal--wrapper
Adds a border to the component wrapper and makes the active state more prominent.

The "Tabbed content" example bellow that use both modifiers together to change the appearance of this component.

Active state

To show the active items, follow these steps:

  • When using icons, use the solid variation of the icon on active items;
  • Add the aria-current attribute to indicates the active item:
    • aria-current="page": for page navigation;
    • aria-current="true": generic current item.

Notice we added aria-hidden to the icons, because in this context they are used only as decoration, since the items have proper text labels that describe each link. So we want to hide the icons from screen readers to reduce clutter.

<nav class="flix-nav-horizontal" aria-label="Navigation Label">
  <ul class="flix-nav-horizontal__items">
    <li class="flix-nav-horizontal__item">
      <a class="flix-nav-horizontal__link" href="#">
        <i class="flix-icon flix-icon-info" aria-hidden="true"></i>
        <span class="flix-nav-horizontal__text">General infos</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a class="flix-nav-horizontal__link" href="#" aria-current="true">
        <i class="flix-icon flix-icon-camera-solid" aria-hidden="true"></i>
        <span class="flix-nav-horizontal__text">Sightseeing</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a class="flix-nav-horizontal__link" href="#">
        <i class="flix-icon flix-icon-city" aria-hidden="true"></i>
        <span class="flix-nav-horizontal__text">Night life</span>
      </a>
    </li>
  </ul>
</nav>

Tabbed content

Honeycomb provides the Tabs plugin that will manage all the functionality and accessibility attributes for you.

Besides using the plugin, creating tabbed content with the nav-horizontal requires you to make some some structural changes:

  • The container:
    • Don't use the nav element for the component, since it is no longer considered site navigation.
    • You may want to use the --stretch and --wrapper modifiers to make the component look more prominent and expand to fill available space.
    • Add the data-flixtabs attribute to the component container, so the plugin can find it.
  • The panels:
    • Add the content of the tab panels inside of flix-nav-horizontal__panel element and give them an id.
    • Tab panels require an accessible label, the plugin will associate their tabs (buttons) as their labels via aria-labelledby, you can add your own aria-label to the panels if necessary.
  • Use buttons:
    • Use buttons instead of links as the __link element and then connect them with their respective panels with aria-controls="{PANEL_ID}".
    • Add aria-selected="true" to the tab that should be selected by default, usually the first one.
    • Add an id to the buttons so the plugin can automatically associate them as panel labels.

The plugin will automatically handle the remaining roles and manage toggling the panels and keyboard controls.

Upper deck panel.
Lower deck panel. 
<section aria-label="Tabs" class="flix-nav-horizontal flix-nav-horizontal--stretch flix-nav-horizontal--wrapper" data-flixtabs="">
  <ul class="flix-nav-horizontal__items">
    <li class="flix-nav-horizontal__item">
      <button type="button" class="flix-nav-horizontal__link" id="upper-deck-tab" aria-controls="upper-deck-panel" aria-selected="true">
        <flix-icon name="bus-double" aria-hidden="true"></flix-icon>
        <span class="flix-nav-horizontal__text">Upper deck</span>
      </button>
    </li>
    <li class="flix-nav-horizontal__item">
      <button type="button" class="flix-nav-horizontal__link" id="lower-deck-tab" aria-controls="lower-deck-panel">
        <flix-icon name="bus-double" aria-hidden="true"></flix-icon>
        <span class="flix-nav-horizontal__text">Lower deck</span>
      </button>
    </li>
  </ul>
  <div class="flix-tabs__panel flix-space-2-top" id="upper-deck-panel">
    <div class="flix-box flix-has-text-centered">
      Upper deck panel.
    </div>
  </div>
  <div class="flix-tabs__panel flix-space-2-top" id="lower-deck-panel">
    <div class="flix-box flix-has-text-centered">
      Lower deck panel.
    </div>
  </div>
</section>