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.
Add .breadcrumb class to the <ol> element
Add .breadcrumb-item class to the <li> element
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.
<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>
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:
The separator can be removed by setting $breadcrumb-divider to none: