Tabs

This is the subnavigation of the page. This component exists to navigate between content blocks or subpages of a page. It consists out of different links that each have their own content.

Alt

px 

			
				<div class="o-tabs js-tabs o-tabs--alt">
	<ul class="o-tabs__list">
		<li class="o-tabs__item is-active ">
			<a href="" class="o-tabs__link">Populaire artikels</a>
		</li>
		<li class="o-tabs__item  o-tabs__item--last">
			<a href="" class="o-tabs__link">Recente artikels</a>
		</li>
	</ul>
</div>

Default

px 

			
				<div class="o-tabs js-tabs ">
	<ul class="o-tabs__list">
		<li class="o-tabs__item is-active ">
			<a href="" class="o-tabs__link">Nav item 1</a>
		</li>
		<li class="o-tabs__item  ">
			<a href="" class="o-tabs__link">Nav item 2</a>
		</li>
		<li class="o-tabs__item  ">
			<a href="" class="o-tabs__link">Nav item 3</a>
		</li>
		<li class="o-tabs__item  ">
			<a href="" class="o-tabs__link">Nav item 4</a>
		</li>
		<li class="o-tabs__item  ">
			<a href="" class="o-tabs__link">Nav item 5</a>
		</li>
		<li class="o-tabs__item  ">
			<a href="" class="o-tabs__link">Nav item 6</a>
		</li>
		<li class="o-tabs__item  ">
			<a href="" class="o-tabs__link">Nav item 7</a>
		</li>
		<li class="o-tabs__item  o-tabs__item--last">
			<a href="" class="o-tabs__link">Nav item 8</a>
		</li>
	</ul>
</div>

Fixed

To make sure the items fit on smaller screens, it is possible to add alternate, shorter text to the items, by adding an extra dom element '.o-tabs__alt-link' before the default text. This content will only be shown on smaller screens while the default text will be hidden, and vice versa.

px 

			
				<div class="o-tabs js-tabs o-tabs--alt o-tabs--fixed">
	<ul class="o-tabs__list">
		<li class="o-tabs__item is-active ">
			<a href="" class="o-tabs__alt-link">Populair</a>
			<a href="" class="o-tabs__link">Populaire artikels</a>
		</li>
		<li class="o-tabs__item  o-tabs__item--last">
			<a href="" class="o-tabs__alt-link">Recent</a>
			<a href="" class="o-tabs__link">Recente artikels</a>
		</li>
	</ul>
</div>

Documentation

Modifiers

  • o-tabs--alt

    Alternate styling.

  • o-tabs__item--last

    Alternate styling for the last tab item that resets its margin right.

  • o-tabs--fixed

    A variant that is not horizontally scrollable. Only use this modifier if the items fit next to each other on all viewport sizes.

States

  • is-active

    Indicate the tab that is currently active. This styling will change the bottom border and the text color to make the active state more visible compared to the other tabs. This class should be placed on the element o-tabs__item.