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.

  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;