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>

<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>

<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>

You can also use buttons for the navigation link, that's useful when you are developing some sort of tabbed functionality, like in the double decker seat selection.

Notice that when using this component for features that are not navigation you should use an HTML element that's different than nav. In the example bellow we implement a tablist.

You can also use the --stretch modifier to make the items expand and fill the available space:

<div role="tablist" class="flix-nav-horizontal flix-nav-horizontal--stretch" aria-label="Bus deck selection">
	<ul class="flix-nav-horizontal__items">
		<li class="flix-nav-horizontal__item">
			<button class="flix-nav-horizontal__link" role="tab">
				<span class="flix-nav-horizontal__text">Upper deck</span>
			</button>
		</li>
		<li class="flix-nav-horizontal__item">
			<button class="flix-nav-horizontal__link" role="tab" aria-current="true">
				<span class="flix-nav-horizontal__text">Lower deck</span>
			</button>
		</li>
	</ul>
</div>

<div role="tablist" class="flix-nav-horizontal flix-nav-horizontal--stretch" aria-label="Bus deck selection">
	<ul class="flix-nav-horizontal__items">
		<li class="flix-nav-horizontal__item">
			<button class="flix-nav-horizontal__link" role="tab">
				<span class="flix-nav-horizontal__text">Upper deck</span>
			</button>
		</li>
		<li class="flix-nav-horizontal__item">
			<button class="flix-nav-horizontal__link" role="tab" aria-current="true">
				<span class="flix-nav-horizontal__text">Lower deck</span>
			</button>
		</li>
	</ul>
</div>

Nav Horizontal

Related Components