core-logo

Bootstrap breadcrumb

Bootstrap breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.

Overview

A breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.

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

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

<nav aria-label="breadcrumb">
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb-item"><a href="#">CoreUI</a></li>
    <li class="c-breadcrumb-item"><a href="#">Profile</a></li>
    <li class="c-breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
<nav class="c-breadcrumb">
  <a class="c-breadcrumb-item" href="#">CoreUI</a>
  <a class="c-breadcrumb-item" href="#">Profile</a>
  <a class="c-breadcrumb-item" href="#">Data</a>
  <span class="c-breadcrumb-item active">Details</span>
</nav>

Changing the separator

Separators can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:

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

It’s also possible to use a base64 embedded SVG icon:

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

The separator can be removed by setting $breadcrumb-divider to none:

$breadcrumb-divider: none;
<nav aria-label="breadcrumb">
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb-item active">Home</li>
    <!-- Breadcrumb Menu-->
    <li class="c-breadcrumb-menu">
      <div class="c-btn-group" role="group" aria-label="Button group with nested dropdown">
        <a class="c-btn" href="#"><i class="cui-speech"></i></a>
        <a class="c-btn" href="#"><i class="cui-graph c-mr-2"></i> Dashboard</a>
        <a class="c-btn" href="#"><i class="cui-settings c-mr-2"></i> Settings</a>
      </div>
    </li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb-item"><a href="#">Home</a></li>
    <li class="c-breadcrumb-item active">Library</li>
    <!-- Breadcrumb Menu-->
    <li class="c-breadcrumb-menu">
      <div class="c-btn-group" role="group" aria-label="Button group with nested dropdown">
        <a class="c-btn" href="#"><i class="cui-speech"></i></a>
        <a class="c-btn" href="#"><i class="cui-graph c-mr-2"></i> Dashboard</a>
        <a class="c-btn" href="#"><i class="cui-settings c-mr-2"></i> Settings</a>
      </div>
    </li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb-item"><a href="#">Home</a></li>
    <li class="c-breadcrumb-item"><a href="#">Library</a></li>
    <li class="c-breadcrumb-item active">Data</li>
    <!-- Breadcrumb Menu-->
    <li class="c-breadcrumb-menu">
      <div class="c-btn-group" role="group" aria-label="Button group with nested dropdown">
        <a class="c-btn" href="#"><i class="cui-speech"></i></a>
        <a class="c-btn" href="#"><i class="cui-graph c-mr-2"></i> Dashboard</a>
        <a class="c-btn" href="#"><i class="cui-settings c-mr-2"></i> Settings</a>
      </div>
    </li>
  </ol>
</nav>
<nav class="c-breadcrumb">
  <a class="c-breadcrumb-item" href="#">Home</a>
  <a class="c-breadcrumb-item" href="#">Library</a>
  <a class="c-breadcrumb-item" href="#">Data</a>
  <span class="c-breadcrumb-item active">Bootstrap</span>
  <!-- Breadcrumb Menu-->
  <div class="c-breadcrumb-menu">
    <div class="c-btn-group" role="group" aria-label="Button group with nested dropdown">
      <a class="c-btn" href="#"><i class="cui-speech"></i></a>
      <a class="c-btn" href="#"><i class="cui-graph c-mr-2"></i> Dashboard</a>
      <a class="c-btn" href="#"><i class="cui-settings c-mr-2"></i> Settings</a>
    </div>
  </div>
</nav>

Accessibility

Since breadcrumbs provide navigation, it’s useful to add a significant label such as aria-label="breadcrumb" to explain the type of navigation implemented in the <nav> element. You should also add an aria-current="page" to the last item of the set to show that it represents the current page.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.