+ + +
+
+

+ + + 5 + + navigation + + + Navigation + +

+ +
+

Navigation components are specialized design components that are used for +page navigation.

+ +
+ +
+ + +
+ Source: styles.scss, line 66 +
+
+
+
+

+ + + 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">
+  <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>
+
+
+ +
+ Source: navigation/breadcrumb/_breadcrumb.scss, line 4 +
+
+
+
+

+ + + 5.2 + + navigation.more-link + + + "More" link + +

+ +
+

Styles the "Read more…" and "Help" links common in Drupal.

+ +
+ +
+ +
+
+ Example
+ + +
+
+ Read more… +
+ +
+ Help +
+ +
+ +
+
+ 
<div class="more-link ">
+  <a href="#">Read more…</a>
+</div>
+
+<div class="more-link ">
+  <a class="more-link__help-icon" href="#">Help</a>
+</div>
+
+
+ +
+ Source: navigation/more-link/_more-link.scss, line 1 +
+
+
+
+

+ + + 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 1 +
+
+
+
+

+ + + 5.4 + + navigation.navbar + + + Navbar + +

+ +
+

A simple method to get navigation links to appear in one line.

+ +
+ +
+ +
+
+ Example
+ + +
+ + +
+ +
+
+ 
<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 4 +
+
+
+
+

+ + + 5.5 + + navigation.pager + + + Pager + +

+ +
+

Paged navigation is a list of page numbers when more than 1 page of content +is available.

+ +
+ +
+ +
+
+ Example
+ + +
+ + +
+ +
+
+ 
<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 1 +
+
+
+
+

+ + + 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 +
+ +
+

+ +

+ +
+ +
+ :focus +
+
+ Focus styling. +
+
+

+ +

+ +
+
+
+ 
<p class="skip-link__wrapper">
+  <a href="#main-menu" class="skip-link visually-hidden--focusable [modifier class]">Jump to navigation</a>
+</p>
+
+
+ +
+ Source: navigation/skip-link/_skip-link.scss, line 1 +
+
+
+
+

+ + + 5.7 + + navigation.tabs + + + Tabs + +

+ +
+

The primary and secondary tabs.

+ +
+ +
+ +
+
+ Examples
+ +
+ Default styling +
+ +
+ + +
+ +
+ .tabs--secondary +
+
+ Secondary tabs +
+
+ + +
+
+
+ 
<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>
+
+
+ +
+ Source: navigation/tabs/_tabs.scss, line 4 +
+
+
+
+

+ + + 5.7.1 + + navigation.tabs.stacked + + + Tabs (stacked) + +

+ +
+

When the secondary tabs appear directly after the primary tabs, the styling +is slightly different.

+ +
+ +
+ +
+
+ Example
+ + +
+ + + + +
+ +
+
+ 
<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>
+
+
+ +
+ Source: navigation/tabs/_tabs.scss, line 14 +
+
+