6 navigation Navigation
Navigation components are specialized design components that are used for page navigation.
styles.scss, line 65
6.1 navigation.breadcrumb Breadcrumb navigation
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
The path to the current page in the form of a list of links.
Markup: navigation/breadcrumb/breadcrumb.twig
<nav class="breadcrumb {{modifier_class}}" role="navigation">
<h2 class="breadcrumb__title">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>
navigation/breadcrumb/_breadcrumb.scss, line 4
6.2 navigation.more-link "More" link
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Styles the "Read more…" and "Help" links common in Drupal.
Markup: navigation/more-link/more-link.twig
<div class="more-link {{modifier_class}}">
<a href="#">Read more…</a>
</div>
<div class="more-link {{modifier_class}}">
<a class="more-link__help-icon" href="#">Help</a>
</div>
navigation/more-link/_more-link.scss, line 1
6.3 navigation.nav-menu Nav menu
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
A "nav menu" is secondary, hierarchical navigation which can be displayed to the side or below the main content.
Markup: navigation/nav-menu/nav-menu.twig
<ul class="nav-menu {{modifier_class}}">
<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>
navigation/nav-menu/_nav-menu.scss, line 1
6.4 navigation.navbar Navbar
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
A simple method to get navigation links to appear in one line.
Markup: navigation/navbar/navbar.twig
<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>
navigation/navbar/_navbar.scss, line 4
6.5 navigation.pager Pager
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Paged navigation is a list of page numbers when more than 1 page of content is available.
Markup: navigation/pager/pager.twig
<ul class="pager {{modifier_class}}">
<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>
navigation/pager/_pager.scss, line 1
6.6 navigation.skip-link Skip link
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
To make the link completely hidden until a user tabs to the link, combine it
with the visually-hidden component.
Markup: navigation/skip-link/skip-link.twig
<p class="skip-link__wrapper">
<a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable {{modifier_class}}">{{content}}</a>
</p>
navigation/skip-link/_skip-link.scss, line 1