5 navigation Navigation
Navigation components are specialized design components that are used for page navigation.
sass/gnwt-core.scss, line 54
5.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>
sass/navigation/breadcrumb/_breadcrumb.scss, line 4
5.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>
sass/navigation/more-link/_more-link.scss, line 1
5.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>
sass/navigation/nav-menu/_nav-menu.scss, line 1
5.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>
sass/navigation/navbar/_navbar.scss, line 4
5.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 pager-first">
<a title="Go to first page" href="/admin/content">« first</a>
</li>
<li class="pager__item pager-previous">
<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">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 pager-next">
<a title="Go to next page" href="/admin/content?page=3">next ›</a>
</li>
<li class="pager__item pager-last">
<a title="Go to last page" href="/admin/content?page=4">last »</a>
</li>
</ul>
sass/navigation/pager/_pager.scss, line 1
5.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>
sass/navigation/skip-link/_skip-link.scss, line 1
5.7 navigation.tabs Tabs
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
The primary and secondary tabs.
Markup: navigation/tabs/tabs.twig
<ul class="tabs {{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">Revisions</a></li>
</ul>
sass/navigation/tabs/_tabs.scss, line 4
5.7.1 navigation.tabs.stacked Tabs (stacked)
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
When the secondary tabs appear directly after the primary tabs, the styling is slightly different.
Markup: navigation/tabs/tabs--stacked.twig
<ul class="tabs">
<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">Revisions</a></li>
</ul>
<ul class="tabs 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">Revisions</a></li>
</ul>
sass/navigation/tabs/_tabs.scss, line 14