Breadcrumb

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

Page Demo Bootstrap Doc

Basic examples

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


Similar to the navigation components, breadcrumbs work fine with or without the usage of list markup.

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

Requirements:

  • /scss/inc/bootstrap-overrides/_breadcrumbs.scss