Breadcrumbs

Documentation and examples for breadcrumbs.

Variables

Name Type Value
$breadcrumb-padding padding 1rem 0
$breadcrumb-margin margin 0
$breadcrumb-decoration unitless none
$breadcrumb-active-color color $text-color
$breadcrumb-gap unitless .5rem
$breadcrumn-divider unitless "/"
$breadcrumn-divider-color color $text-color

Overview

Following a bit the Breadcrumb Design Pattern in WAI-ARIA, Cactu decided to opt for a structure of numerical list, how is marked by the “good practices in breadcrumbs”, in addition, the list structure allows us to cleanly separate each link without problems on hover events with the divider.

Examples

<ol class="breadcrumb">
  <li><a href="#" class="active">Home</a></li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#" class="active">Documents</a></li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Documents</a></li>
  <li><a href="#" class="active">October</a></li>
</ol>