Bootstrap4 Breadcrumb Navigation

Breadcrumb navigation is a method of displaying website hierarchy information. Taking a blog as an example, breadcrumb navigation can show the publication date, category, or tags. They indicate the current page's position within the navigation hierarchy and serve as a navigational aid in the user interface.

In Bootstrap, breadcrumb navigation is a simple unordered list with the .breadcrumb class. Separators are added through ::before and content in CSS (bootstrap.min.css), and the following class is automatically added:

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

Bootstrap4 Breadcrumb Navigation Example

<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<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>
</ol>

We can also use a non-list format:

Bootstrap4 Breadcrumb Navigation Example

<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>
</nav>