Nav

The main navigation of the page is present within the main header component. Each item consists out of a sub navigation that behaves as a flyout on desktop and as a collapsable on mobile or other touch devices.

Default

px 

			
				<nav class="o-nav js-nav ">
	<ul class="o-nav__list u-hide@below-viewport-9">
		<li class="o-nav__item">
			<div class="o-nav__flyout o-nav__flyout--align-left">
				<a class="o-nav__flyout-trigger" href="#">Opleidingen</a>
				<ul class="o-nav__sub ">
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Opleidingen per thema</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Opleidingen per sector</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Opleidingstrajecten</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">De voorwaarden</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Opleidingspremies</a>
					</li>
				</ul>
			</div>
		</li>
		<li class="o-nav__item">
			<div class="o-nav__flyout ">
				<a class="o-nav__flyout-trigger" href="#">Extra-diensten</a>
				<ul class="o-nav__sub ">
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Blog - leren met resultaat</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Ontslagbegeleiding</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Hulp bij aanwerving</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Opleidingstoolbox</a>
					</li>
				</ul>
			</div>
		</li>
		<li class="o-nav__item">
			<div class="o-nav__flyout ">
				<a class="o-nav__flyout-trigger" href="#">Over Cevora</a>
				<ul class="o-nav__sub ">
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Veelgestelde vragen</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Het Cevora-team</a>
					</li>
					<li class="o-nav__sub-item">
						<a class="o-nav__sub-link" href="#">Werken bij Cevora</a>
					</li>
				</ul>
			</div>
		</li>
		<li class="o-nav__item">
			<a class="o-nav__item-link" href="#">Contacteer ons</a>
		</li>
	</ul>
	<div class="o-nav__mobile u-hide@above-viewport-9">
		<ul class="o-nav__list">
			<li class="o-nav__item">
				<div class="o-nav__collapse ">
					<div class="o-nav__collapse-header">
						<a class="o-nav__collapse-text" href="#">Opleidingen</a>
						<button class="o-nav__collapse-trigger"></button>
					</div>
					<div class="o-nav__collapse-content">
						<ul class="o-nav__sub ">
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Opleidingen per thema</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Opleidingen per sector</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Opleidingstrajecten</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">De voorwaarden</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Opleidingspremies</a>
							</li>
						</ul>
					</div>
				</div>
			</li>
			<li class="o-nav__item">
				<div class="o-nav__collapse ">
					<div class="o-nav__collapse-header">
						<a class="o-nav__collapse-text" href="#">Extra-diensten</a>
						<button class="o-nav__collapse-trigger"></button>
					</div>
					<div class="o-nav__collapse-content">
						<ul class="o-nav__sub ">
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Blog - leren met resultaat</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Ontslagbegeleiding</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Hulp bij aanwerving</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Opleidingstoolbox</a>
							</li>
						</ul>
					</div>
				</div>
			</li>
			<li class="o-nav__item">
				<div class="o-nav__collapse ">
					<div class="o-nav__collapse-header">
						<a class="o-nav__collapse-text" href="#">Over Cevora</a>
						<button class="o-nav__collapse-trigger"></button>
					</div>
					<div class="o-nav__collapse-content">
						<ul class="o-nav__sub ">
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Veelgestelde vragen</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Het Cevora-team</a>
							</li>
							<li class="o-nav__sub-item">
								<a class="o-nav__sub-link" href="#">Werken bij Cevora</a>
							</li>
						</ul>
					</div>
				</div>
			</li>
			<li class="o-nav__item">
				<a class="o-nav__item-link" href="#">Contacteer ons</a>
			</li>
		</ul>
		<div class="o-nav__register">
			<span class="o-nav__register-option">
				<a class="a-link  " href="">
					<span class="a-link__text">Registreer</span>
				</a>
				of
			</span>
			<button class="a-button o-nav__register-option ">
				<span class="a-button__text">Login</span>
			</button>
		</div>
	</div>
</nav>

Documentation

Modifiers

  • is-open

    Indicates that the nav is shown to the user. This is only applicable on mobile or other touch devices and is toggled on the root of the component: o-nav.

  • is-active

    Indicate to the user which item in the navigational component is active. This is placed on the item of the navigation: o-nav__item.

  • is-open

    Do not confuse this state with its root variant, because this is used on the collapsable sub-navigation on mobile or other touch devices. It is placed on the o-nav__collapse child element.