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 navigation 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="Page sections">
	<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>

The active item requires some attention:

  • 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 information.

Notice that the icons have aria-hidden, that's because the navigation items must have a text and that describes each link, so the icons serve only as decoration. Hide them 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 can use the --stretch modifier to make the items expand and fill the 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 the 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="{RESPECTIVE_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 seat selection.
Lower deck seat selection. 
<div class="flix-nav-horizontal flix-nav-horizontal--stretch" 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">
				<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">
				<span class="flix-nav-horizontal__text">
					Lower deck
				</span>
			</button>
		</li>
	</ul>
	<div class="flix-nav-horizontal__panel flix-space-2-top" id="upper-deck-panel">
    <div class="flix-box flix-has-text-centered">
			<a class="hcr-link-11-6-3" href="#">Upper deck seat selection</a>.
		</div>
  </div>
	<div class="flix-nav-horizontal__panel flix-space-2-top" id="lower-deck-panel">
    <div class="flix-box flix-has-text-centered">
			<a class="hcr-link-11-6-3" href="#">Lower deck seat selection</a>.
		</div>
  </div>
</div>