Bootstrap Breadcrumbs

Breadcrumbs are used to indicate the current page's location within a navigational hierarchy. A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. The hierarchy is created as ordered list.

images/coding/coding12.webp
  1. Add .breadcrumb class to the <ol> element
  2. Add .breadcrumb-item class to the <li> element
  3. Add .active to the <li> element of the current page.

Since breadcrumbs provide a navigation, you can add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For example,

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

1. Separator

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

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

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

$breadcrumb-divider: none;