Standard horizontal navigation. Mostly used in the heading.

<nav class="nav" role="navigation" aria-label="Primary navigation">
	<ul class="nav__list">
		<li class="nav__item" role="presentation">
			<a href="#" class="nav__link">Home</a>
		</li>
		<li class="nav__item" role="presentation">
			<a href="#" class="nav__link">Products</a>
		</li>
		<li class="nav__item is-active" role="presentation">
			<a href="#" class="nav__link" aria-current="page">About</a>
		</li>
	</ul>
</nav>
Selector Description
role="navigation" Required For a11y
aria-label="Primary navigation" Required To make a distinction with the <nav> used in breadcrumbs or pagination. Translate this string to your current locale.
aria-current="page" Required Only required if one of the links matches the current page.

Vertically stacked

<nav class="nav nav--vertical" role="navigation" aria-label="Primary navigation">
	<ul class="nav__list">
		<li class="nav__item" role="presentation">
			<a href="#" class="nav__link">Home</a>
		</li>
		<li class="nav__item" role="presentation">
			<a href="#" class="nav__link">Products</a>
		</li>
		<li class="nav__item is-active" role="presentation">
			<a href="#" class="nav__link" aria-current="page">About</a>
		</li>
	</ul>
</nav>