Breadcrumbs

In groundhog since v0.1.1

Examples

Home
Ruxit API v1 documentation (Beta)
General Information


<ul class="breadcrumbs">
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="#noop">Home</a>
  </li>
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="#noop">Ruxit API v1 documentation (Beta)</a>
  </li>
  <li class="breadcrumbs__item">
    <span class="breadcrumbs__last">General Information</span>
  </li>
</ul>

Home
Ruxit API v1 documentation (Beta)
General Information


<div class="theme--blue">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Ruxit API v1 documentation (Beta)</a>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__last">General Information</span>
    </li>
  </ul>
</div>

Home
Ruxit API v1 documentation (Beta)
General Information


<div class="theme--purple">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Ruxit API v1 documentation (Beta)</a>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__last">General Information</span>
    </li>
  </ul>
</div>

Home
Ruxit API v1 documentation (Beta)
General Information


<div class="theme--green">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Ruxit API v1 documentation (Beta)</a>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__last">General Information</span>
    </li>
  </ul>
</div>

Home
Ruxit API v1 documentation (Beta)
General Information


<div class="theme--royalblue">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#noop">Ruxit API v1 documentation (Beta)</a>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__last">General Information</span>
    </li>
  </ul>
</div>

Introduction

The Groundhog breadcrumbs bar component is a visual way to display the hierarchy path to the page currently viewed by the user. The links inside the breadcrumbs bar help the user navigate and put the currently viewed page into context.

Including the breadcrumbs bar

Breadcrumbs visually enhances the basic html <ul> (unordered list) element to introduce semantic structure into the markup of the breadcrumbs.

To include a Groundhog breadcrumbs bar first create a <ul> (unordered list) element and include the hierarchy into individual li (list items). List items can either contain <a> (anchors) or <span> (inline span element). Usually the last entry in the breadcrumbs is not represented by an anchor element, since it should represent the currently viewed page.
```
<ul>
<li>
 <a href='/'>Home</a>
</li>
<li>
 <span>Solutions</span>
</li>
</ul>
```

Add the necessary Groundhog classes to the elements class attributes:

<ul class="breadcrumbs">
<li class="breadcrumbs__item">
 <a class="breadcrumbs__link" href='/'>Home</a>
</li>
<li class="breadcrumbs__item">
 <span class="breadcrumbs__last">Solutions</span>
</li>
</ul>

Add a wrapping <div> with a theme class to set the theme (optional):

<div class="theme--purple">
<ul class="breadcrumbs">
 ...
</ul>
</div>

Available themes for breadcrumbs

The default theme for the breadcrumb is turquoise, other available themes are:

class name	theme color
`.theme--blue`	Base class blue theme
`.theme--purple`	Base class purple theme
`.theme--green`	Base class green theme
`.theme--royalblue`	Base class royalblue theme