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.
- Don't use the
- The panels:
- Add the content of the tab panels inside of the
flix-nav-horizontal__panel
element and give them anid
. - Tab panels require an accessible label, the plugin will associate their tabs (buttons) as their labels via
aria-labelledby
, you can add your ownaria-label
to the panels if necessary.
- Add the content of the tab panels inside of the
- Use buttons:
- Instead of links as the
__link
element, connect them with their respective panels witharia-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.
- Instead of links as the
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.
<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-7-7-0" 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-7-7-0" 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.