Sign in


Sign up


Bootstrap Breadcrumb

Bootstrap breadcrumbs are navigation elements which indicate a current location on the website. Breadcrumbs show a hierarchy of the current location as well

They are highly useful in projects, that tend to have a large structure like magazines or documentations.

Examples of Bootstrap breadcrumb use:

  • Documentation page
  • Magazine
  • ERP system

See the following breadcrumbs examples:


Basic breadcrumbs

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

Breadcrumbs with dark background

                
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: #fff; }
.light-font .breadcrumb-item.active {
    color: #cfd8dc; }
                
            
                
<div class="light-font">

    <ol class="breadcrumb default-color">
        <li class="breadcrumb-item active">Home</li>
    </ol>
    <ol class="breadcrumb primary-color">
        <li class="breadcrumb-item"><a class="white-text" href="#">Home</a></li>
        <li class="breadcrumb-item active">Library</li>
    </ol>
    <ol class="breadcrumb secondary-color">
        <li class="breadcrumb-item"><a class="white-text" href="#">Home</a></li>
        <li class="breadcrumb-item"><a class="white-text" href="#">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>

</div>
                
            

Breadcrumbs with light background

                
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: #000; }
.dark-font .breadcrumb-item.active {
    color: #455a64; } 
                
            
                
<div class="dark-font">

    <ol class="breadcrumb cyan lighten-4">
        <li class="breadcrumb-item active">Home</li>
    </ol>
    <ol class="breadcrumb pink lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a></li>
        <li class="breadcrumb-item active">Library</li>
    </ol>
    <ol class="breadcrumb purple lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a></li>
        <li class="breadcrumb-item"><a class="black-text" href="#">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>

</div>
                
            

Breadcrumbs with uppercases

                
<div class="font-up">

    <ol class="breadcrumb cyan lighten-4">
        <li class="breadcrumb-item active">Home</li>
    </ol>
    <ol class="breadcrumb cyan lighten-4">
        <li class="breadcrumb-item"><a class="" href="#">Home</a></li>
        <li class="breadcrumb-item active">Library</li>
    </ol>
    <ol class="breadcrumb cyan lighten-4">
        <li class="breadcrumb-item"><a class="" href="#">Home</a></li>
        <li class="breadcrumb-item"><a class="" href="#">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>

</div>
                
            

Breadcrumbs with a bold font

                
.font-up-bold .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.font-up-bold .breadcrumb-item a h5::after {
    content: "/";
    margin-left: 1rem;
    color: #868e96; }
                
            
                
<ol class="breadcrumb">
    <li class="breadcrumb-item active"><h5 class="mr-3 mb-0"><strong>Home</strong></h5></li>
</ol>
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a class="" href="#"><h5 class="mr-3 mb-0"><strong>Home</strong></h5></a></li>
    <li class="breadcrumb-item active"><h5 class="mr-3 mb-0"><strong>Library</strong></h5></li>
</ol>
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a class="" href="#"><h5 class="mr-3 mb-0"><strong>Home</strong></h5></a></li>
    <li class="breadcrumb-item"><a class="" href="#"><h5 class="mr-3 mb-0"><strong>Library</strong></h5></a></li>
    <li class="breadcrumb-item active"><h5 class="mr-3 mb-0"><strong>Data</strong></h5></li>
</ol>
                
            

Breadcrumbs with icons

                
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: #eeeeee; }
                
            
                
<div class="bc-icons">

    <ol class="breadcrumb pink lighten-4">
        <li class="breadcrumb-item active"><i class="fa fa-star-o mr-2 white-text" aria-hidden="true"></i>Home</li>
    </ol>
    <ol class="breadcrumb pink lighten-3">
        <li class="breadcrumb-item"><i class="fa fa-star-o mr-2 white-text" aria-hidden="true"></i><a class="white-text" href="#">Home</a></li>
        <li class="breadcrumb-item active"><i class="fa fa-star-o mx-2 white-text" aria-hidden="true"></i>Library</li>
    </ol>
    <ol class="breadcrumb pink lighten-2">
        <li class="breadcrumb-item"><i class="fa fa-star-o mr-2 white-text" aria-hidden="true"></i><a class="white-text" href="#">Home</a></li>
        <li class="breadcrumb-item"><i class="fa fa-star-o mx-2 white-text" aria-hidden="true"></i><a class="white-text" href="#">Library</a></li>
        <li class="breadcrumb-item active"><i class="fa fa-star-o mx-2 white-text" aria-hidden="true"></i>Data</li>
    </ol>

</div>
                
            

Breadcrumbs with arrows

                
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
    color: #455a64; } 
                
            
                
<div class="bc-icons-2">

    <ol class="breadcrumb indigo lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-caret-right mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-caret-right mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>
    <ol class="breadcrumb blue-grey lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>
    <ol class="breadcrumb purple lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-right mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-right mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>
    <ol class="breadcrumb red lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-double-left mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-double-left mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>
    <ol class="breadcrumb cyan lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-left mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-left mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>
    <ol class="breadcrumb amber lighten-4">
        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-caret-left mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-caret-left mx-2" aria-hidden="true"></i></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>

</div>
                
            

Breadcrumbs with hamburger button

                
.navbar .breadcrumb-item + .breadcrumb-item::before {
    color: #bdbdbd; }
.navbar .breadcrumb-item.active {
    color: #bdbdbd; } 
.navbar.no-content .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
                
            
                
<nav class="navbar navbar-expand-md navbar-dark indigo mb-5">
    <!-- SideNav slide-out button -->
    <div class="float-left">
        <a class="white-text" href="#!" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    </div>
    <!-- Breadcrumb-->
    <div class="mr-auto">
        <ol class="breadcrumb clearfix d-none d-md-inline-flex pt-0">
            <li class="breadcrumb-item"><a class="white-text" href="#!">Home</a></li>
            <li class="breadcrumb-item active">Library</li>
        </ol>
    </div>
    <form class="form-inline">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
    </form>
</nav>

<nav class="navbar navbar-expand-md navbar-dark primary-color mb-5 no-content">
    <!-- SideNav slide-out button -->
    <div class="float-left">
        <a class="white-text" href="#!" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    </div>
    <!-- Breadcrumb-->
    <div class="mr-auto">
        <ol class="breadcrumb clearfix d-none d-md-inline-flex pt-0">
            <li class="breadcrumb-item"><a class="white-text" href="#!">Javascript</a><i class="fa fa-angle-double-right mx-2 white-text" aria-hidden="true"></i></li>
            <li class="breadcrumb-item active">Date Picker</li>
        </ol>
    </div>
    <ul class="navbar-nav ml-auto nav-flex-icons">
        <li class="nav-item">
            <a class="nav-link"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link"><i class="fa fa-google-plus"></i></a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> 
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-unique" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
            </div>
        </li>
    </ul>
</nav>

<nav class="navbar navbar-expand-md navbar-dark pink darken-4 mb-5 no-content">
    <!-- SideNav slide-out button -->
    <div class="float-left">
        <a class="amber-text" href="#!" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    </div>
    <!-- Breadcrumb-->
    <div class="mr-auto">
        <ol class="breadcrumb clearfix d-none d-md-inline-flex pt-0">
            <li class="breadcrumb-item"><a class="white-text" href="#!">Components</a><i class="fa fa-hand-o-right mx-3 amber-text" aria-hidden="true"></i></li>
            <li class="breadcrumb-item active">Buttons</li>
        </ol>
    </div>
    <ul class="navbar-nav ml-auto nav-flex-icons">
        <li class="nav-item">
            <a class="nav-link">1 <i class="fa fa-envelope amber-text"></i></a>
        </li>
    </ul>
</nav>