Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap Breadcrumb

Bootstrap breadcrumbs indicate on which exact page in the navigational hierarchy your visitors currently are.

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