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>

Tabs plugin

Honeycomb provides the tabs.js plugin that will manage all the functionality and accessibility attributes for you. Including plugin is very simple:

  • Include the plugin from our CDN at the end of your page: 
    <script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/tabs.js"></script>
  • Initialize the plugin: 
    document.addEventListener("DOMContentLoaded", function() {
  tabs.init();
});

If you are using the nav-horizontal component, there are some structural changes you need to make:

  • 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:
    • Instead of links as the __link element, 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 add the tab, tabpanel, tablist and presentation roles accordingly for for the known nav-horizontal elements. It will also manage toggling the panel visibility, focus management 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-10-8-1" 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-10-8-1" href="#">Lower deck seat selection</a>.
		</div>
  </div>
</div>

The plugin will also work if you want to use it with different HTML markup, but some roles will not be applied properly. Namely: The tablist on the list element and presentation on the list items.

Make sure to add any missing roles to your custom component to ensure its proper accessibility.