5 navigation Navigation
Navigation components are specialized design components that are used for page navigation.
Source:
navigation/_navigation.scss, line 1
5.1 navigation.breadcrumb Breadcrumb navigation
The path to the current page in the form of a list of links.
Example
<nav class="breadcrumb " role="navigation" aria-labelledby="system-breadcrumb">
<h2 id="system-breadcrumb" class="visually-hidden">You are here</h2>
<ol class="breadcrumb__list">
<li class="breadcrumb__item">
<a href="#">Home</a>
›
</li>
<li class="breadcrumb__item">
<a href="#">Level 1</a>
›
</li>
<li class="breadcrumb__item">
<a href="#">Level 2</a>
›
</li>
<li class="breadcrumb__item">
Current item
</li>
</ol>
</nav>
Source:
navigation/breadcrumb/breadcrumb.scss, line 3
5.2 navigation.more-link "More" link
Styles the "Read more…" links common in Drupal.
Example
<div class="more-link ">
<a href="#">Read more…</a>
</div>
Source:
navigation/more-link/more-link.scss, line 3
5.3 navigation.nav-menu Nav menu
A "nav menu" is secondary, hierarchical navigation which can be displayed to the side or below the main content.
Example
<ul class="nav-menu ">
<li class="nav-menu__item">
<a href="/" class="nav-menu__link">Home</a>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
</li>
<li class="nav-menu__item is-expanded is-active-trail">
<a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
<ul class="nav-menu">
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
</li>
<li class="nav-menu__item is-active-trail is-active">
<a href="#" class="nav-menu__link is-active">Decet</a>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Aliquip Similis</a>
</li>
</ul>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Ibidem Sudo</a>
</li>
</ul>
Source:
navigation/nav-menu/nav-menu.scss, line 6
5.4 navigation.navbar Navbar
A simple method to get navigation links to appear in one line.
<ul class="navbar clearfix">
<li class="navbar__item"><a href="#">Home</a></li>
<li class="navbar__item"><a href="#">Blandit Jugis</a></li>
<li class="navbar__item"><a href="#">Causa Diam</a></li>
<li class="navbar__item"><a href="#">Abigo Caecus</a></li>
<li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
<li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
<li class="navbar__item"><a href="#">Ut</a></li>
</ul>
Source:
navigation/navbar/navbar.scss, line 3
5.5 navigation.pager Pager
Paged navigation is a list of page numbers when more than 1 page of content is available.
<ul class="pager ">
<li class="pager__item">
<a title="Go to first page" href="/admin/content">« first</a>
</li>
<li class="pager__item">
<a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
</li>
<li class="pager__item">
<a title="Go to page 1" href="/admin/content">1</a>
</li>
<li class="pager__item">
<a title="Go to page 2" href="/admin/content?page=1">2</a>
</li>
<li class="pager__current-item">3</li>
<li class="pager__item">
<a title="Go to page 4" href="/admin/content?page=3">4</a>
</li>
<li class="pager__item">
<a title="Go to page 5" href="/admin/content?page=4">5</a>
</li>
<li class="pager__item">
<a title="Go to next page" href="/admin/content?page=3">next ›</a>
</li>
<li class="pager__item">
<a title="Go to last page" href="/admin/content?page=4">last »</a>
</li>
</ul>
Source:
navigation/pager/pager.scss, line 3
5.6 navigation.skip-link Skip link
To make the link completely hidden until a user tabs to the link, combine it
with the visually-hidden component.
Examples
Default styling
.visually-hidden.visually-hidden--focusable
Visually hidden version.
.visually-hidden.visually-hidden--focusable:focus
Visually hidden version when receiving focus.
<a href="#main-content" class="skip-link [modifier class]">
Skip to main content
</a>
Source:
navigation/skip-link/skip-link.scss, line 3
5.7 navigation.tabs Tabs
The primary and secondary tabs.
Examples
Default styling
Primary tabs
.tabs--secondary
Secondary tabs
Primary tabs
<h2 class="visually-hidden">Primary tabs</h2>
<ul class="tabs clearfix [modifier class]">
<li class="tabs__tab is-active">
<a href="#" class="tabs__tab-link is-active">
View
<span class="visually-hidden">(active tab)</span>
</a>
</li>
<li class="tabs__tab ">
<a href="#" class="tabs__tab-link ">
Edit
</a>
</li>
<li class="tabs__tab ">
<a href="#" class="tabs__tab-link ">
Delete
</a>
</li>
</ul>
Source:
navigation/tabs/tabs.scss, line 3
5.7.1 navigation.tabs.stacked Tabs (stacked)
When the secondary tabs appear directly after the primary tabs, the styling is slightly different.
Example
<h2 class="visually-hidden">Primary tabs</h2>
<ul class="tabs clearfix ">
<li class="tabs__tab is-active">
<a href="#" class="tabs__tab-link is-active">
View
<span class="visually-hidden">(active tab)</span>
</a>
</li>
<li class="tabs__tab ">
<a href="#" class="tabs__tab-link ">
Edit
</a>
</li>
<li class="tabs__tab ">
<a href="#" class="tabs__tab-link ">
Delete
</a>
</li>
</ul>
<h2 class="visually-hidden">Secondary tabs</h2>
<ul class="tabs clearfix tabs--secondary">
<li class="tabs__tab is-active">
<a href="#" class="tabs__tab-link is-active">
View
<span class="visually-hidden">(active tab)</span>
</a>
</li>
<li class="tabs__tab ">
<a href="#" class="tabs__tab-link ">
Edit
</a>
</li>
<li class="tabs__tab ">
<a href="#" class="tabs__tab-link ">
Delete
</a>
</li>
</ul>
Source:
navigation/tabs/tabs.scss, line 13