Breadcrumbs

Use breadcrumbs to indicate the navigational hierarchy of the current page

Example

Here are a few examples of breadcrumbs. You can change the background using contextual classes (e.g, .breadcrumb-primary).

<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-primary text-white">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-secondary text-white">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-tertiary text-white">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-info text-white">
        <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>
<!--End of Breadcrumb-->

Transparent Breadcrumbs

The following breadcrumbs have a transparent background which can be used for dark backgrounds:

<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-primary breadcrumb-transparent">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-secondary breadcrumb-transparent">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-tertiary breadcrumb-transparent">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-info breadcrumb-transparent">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-danger breadcrumb-transparent">
        <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>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
        <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>
<!--End of Breadcrumb-->