Navigation

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>