🎉 Limited offer! Get a Pro license and save up to $1.000. 🎉 Learn more

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="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="#">CoreUI</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="#">CoreUI</a></li>
    <li class="breadcrumb-item"><a href="#">Profile</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">CoreUI</a>
  <a class="breadcrumb-item" href="#">Profile</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">Details</span>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active">Home</li>
    <!-- Breadcrumb Menu-->
    <li class="breadcrumb-menu">
      <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <a class="btn" href="#"><i class="cui-speech"></i></a>
        <a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
        <a class="btn" href="#"><i class="cui-settings"></i> Settings</a>
      </div>
    </li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active">Library</li>
    <!-- Breadcrumb Menu-->
    <li class="breadcrumb-menu">
      <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <a class="btn" href="#"><i class="cui-speech"></i></a>
        <a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
        <a class="btn" href="#"><i class="cui-settings"></i> Settings</a>
      </div>
    </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">Data</li>
    <!-- Breadcrumb Menu-->
    <li class="breadcrumb-menu">
      <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <a class="btn" href="#"><i class="cui-speech"></i></a>
        <a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
        <a class="btn" href="#"><i class="cui-settings"></i> Settings</a>
      </div>
    </li>
  </ol>
</nav>
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
  <!-- Breadcrumb Menu-->
  <div class="breadcrumb-menu">
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
      <a class="btn" href="#"><i class="cui-speech"></i></a>
      <a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
      <a class="btn" href="#"><i class="cui-settings"></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.