Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Examples #

Create a breadcrumb with the bare minimum of styling by using an ordered or unordered list with linked list elements. Use the tools to add more styles as needed.

<div class="bd-example">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
      </ol>
    </nav>

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
      </ol>
    </nav>

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
      </ol>
    </nav>
  </div>

RESULT

Dividers #

In CSS, dividers are added automatically through ::before and content. They can be altered using the local CSS custom property --bs-breadcrumb-divider, the Sass variable $breadcrumb-divider, or, if necessary, $breadcrumb-divider-flipped for the RTL equivalent. As a fallback to the custom property, Sass variable by default is used. In this manner, obtain a global divider that can be altered whenever required without having to recompile CSS.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

RESULT

The quote function is necessary to create the quotations around a string when editing with Sass. Using > as the divider, for instance, you could do this:

  $breadcrumb-divider: quote(">");

Accessibility #

Since breadcrumbs serve as a navigational aid, it's a good idea to include a descriptive label, such as aria-label="breadcrumb," to define the kind of navigation offered by the

element. Also apply an aria-current="page" to the last item in the collection to denote that it represents the current page.

See the ARIA Authoring Practices Guide breadcrumb pattern for further details.

CSS #

Variables #

Added in v1.0.0

Breadcrumbs now leverage local CSS variables on.breadcrumb for improved real-time customization as part of UX4G's growing CSS variables strategy. Sass is used to set the values for the CSS variables, therefore Sass customization is still available.

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;

Sass variables #

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;

Examples
Dividers
Accessibility
CSS
- Variables
Sass variables

Demo

Demo

Previous « Badge

Next Button Group »