Zen 7.x-6.x 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">
  <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

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

Jump to navigation

:focus

Focus styling.

Jump to navigation

<p class="skip-link__wrapper">
  <a href="#main-menu" class="skip-link visually-hidden 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