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
  1. <nav class="breadcrumb " role="navigation">
  2. <h2 class="breadcrumb__title">You are here</h2>
  3. <ol class="breadcrumb__list">
  4. <li class="breadcrumb__item"><a href="#">Home</a></li>
  5. <li class="breadcrumb__item"><a href="#">Level 1</a></li>
  6. <li class="breadcrumb__item"><a href="#">Level 2</a></li>
  7. <li class="breadcrumb__item">Current item</li>
  8. </ol>
  9. </nav>
Source: navigation/breadcrumb/_breadcrumb.scss, line 4

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.

  1. <ul class="nav-menu ">
  2. <li class="nav-menu__item">
  3. <a href="/" class="nav-menu__link">Home</a>
  4. </li>
  5. <li class="nav-menu__item is-collapsed">
  6. <a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
  7. </li>
  8. <li class="nav-menu__item is-expanded is-active-trail">
  9. <a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
  10. <ul class="nav-menu">
  11. <li class="nav-menu__item">
  12. <a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
  13. </li>
  14. <li class="nav-menu__item is-active-trail is-active">
  15. <a href="#" class="nav-menu__link is-active">Decet</a>
  16. </li>
  17. <li class="nav-menu__item is-collapsed">
  18. <a href="#" class="nav-menu__link">Aliquip Similis</a>
  19. </li>
  20. </ul>
  21. </li>
  22. <li class="nav-menu__item is-collapsed">
  23. <a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
  24. </li>
  25. <li class="nav-menu__item is-collapsed">
  26. <a href="#" class="nav-menu__link">Ibidem Sudo</a>
  27. </li>
  28. </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.

  1. <ul class="navbar clearfix">
  2. <li class="navbar__item"><a href="#">Home</a></li>
  3. <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
  4. <li class="navbar__item"><a href="#">Causa Diam</a></li>
  5. <li class="navbar__item"><a href="#">Abigo Caecus</a></li>
  6. <li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
  7. <li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
  8. <li class="navbar__item"><a href="#">Ut</a></li>
  9. </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.

  1. <ul class="pager ">
  2. <li class="pager__item">
  3. <a title="Go to first page" href="/admin/content">« first</a>
  4. </li>
  5. <li class="pager__item">
  6. <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
  7. </li>
  8. <li class="pager__item">
  9. <a title="Go to page 1" href="/admin/content">1</a>
  10. </li>
  11. <li class="pager__item">
  12. <a title="Go to page 2" href="/admin/content?page=1">2</a>
  13. </li>
  14. <li class="pager__current-item">3</li>
  15. <li class="pager__item">
  16. <a title="Go to page 4" href="/admin/content?page=3">4</a>
  17. </li>
  18. <li class="pager__item">
  19. <a title="Go to page 5" href="/admin/content?page=4">5</a>
  20. </li>
  21. <li class="pager__item">
  22. <a title="Go to next page" href="/admin/content?page=3">next ›</a>
  23. </li>
  24. <li class="pager__item">
  25. <a title="Go to last page" href="/admin/content?page=4">last »</a>
  26. </li>
  27. </ul>
Source: navigation/pager/_pager.scss, line 1

5.7 navigation.tabs Tabs

The primary and secondary tabs.

Examples
Default styling
.tabs--secondary
Secondary tabs
  1. <ul class="tabs [modifier class]">
  2. <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  3. <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  4. <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
  5. </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.

  1. <ul class="tabs ">
  2. <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  3. <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  4. <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
  5. </ul>
  6. <ul class="tabs tabs--secondary">
  7. <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  8. <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  9. <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
  10. </ul>
Source: navigation/tabs/_tabs.scss, line 14