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:

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

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

Nav Horizontal

Related Components