STARTERKIT Style Guide

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

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

.visually-hidden.visually-hidden--focusable

Visually hidden version.



<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

.tabs--secondary

Secondary tabs



&lt;ul class=&quot;tabs clearfix [modifier class]&quot;&gt;&lt;/ul&gt;

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



&lt;ul class=&quot;tabs clearfix &quot;&gt;&lt;/ul&gt;


&lt;ul class=&quot;tabs clearfix tabs--secondary&quot;&gt;&lt;/ul&gt;

Source: navigation/tabs/tabs.scss, line 13