5+ Bootstrap Breadcrumb Examples

This post contains a total of 5+ Bootstrap Breadcrumb Examples with Source Code. All these Breadcrumbs are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Breadcrumb Examples

1. Bootstrap Breadcrumb

Made by Tyler Brown. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
.breadcrumb.wizard {
  padding: 0px;
  background: #D4D4D4;
  list-style: none;
  overflow: hidden;
  margin-top: 20px;
  font-size: 10px;
}

.breadcrumb.wizard > li + li:before {
  padding: 0;
}

.breadcrumb.wizard li {
  float: left;
}

.breadcrumb.wizard li.active a {
  background: brown;
  /* fallback color */
  background: #ffc107;
}

.breadcrumb.wizard li.completed a {
  background: brown;
  /* fallback color */
  background: #3bc989;
}

.breadcrumb.wizard li.active a:after {
  border-left: 30px solid #ffc107;
}

.breadcrumb.wizard li.completed a:after {
  border-left: 30px solid #3bc989;
}

.breadcrumb.wizard li a {
  color: white;
  text-decoration: none;
  padding: 10px 0 10px 45px;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb.wizard li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #d4d4d4;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.breadcrumb.wizard li a:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}

.breadcrumb.wizard li:first-child a {
  padding-left: 15px;
}

.breadcrumb.wizard li a:hover {
  background: #ffc107;
}

.breadcrumb.wizard li a:hover:after {
  border-left-color: #ffc107 !important;
}
</style>
</head>
<body>
  <div class="container">
	<div class="row">
		<ul class="breadcrumb wizard">
			<li class="completed"><a href="javascript:void(0);">Personal Contact</a></li>
			<li class="completed"><a href="javascript:void(0);">Educational/Experience</a></li>
			<li><a href="javascript:void(0);">Photo Upload</a></li>
			<li class=""><a href="javascript:void(0);">Payment</a></li>
		</ul>
	</div>
</div>
</body>
</html>

2. Snippet Breadcrumbs

Made by haycuoilennao. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'>
  
<style>

/* Caret Breadcrumb */
.breadcrumb-caret .breadcrumb-item+.breadcrumb-item::before {
  content: '\f0da';
  font-family: 'FontAwesome';
}

/* Bullet */
.breadcrumb-bullet .breadcrumb-item+.breadcrumb-item::before {
  content: 'โ€ข';
}

/* Arrow Breadcrumb */
.breadcrumb-arrow .breadcrumb-item+.breadcrumb-item::before {
  content: '';
}

.breadcrumb-arrow {
  height: 40px;
  line-height: 40px;
}

.breadcrumb-arrow .breadcrumb-item:first-child a {
  border-radius: 4px 0 0 4px;
}

.breadcrumb-arrow .breadcrumb-item,
.breadcrumb-arrow .breadcrumb-item a,
.breadcrumb-arrow .breadcrumb-item span {
  display: inline-block;
  vertical-align: top;
}

.breadcrumb-arrow .breadcrumb-item:not(:first-child) {
  margin-left: -1px;
}

.breadcrumb-arrow .breadcrumb-item+.breadcrumb-item:before {
  padding: 0;
  content: "";
}

.breadcrumb-arrow .breadcrumb-item a,
.breadcrumb-arrow .breadcrumb-item.active {
  height: 40px;
  padding: 0 10px 0 25px;
  line-height: 40px;
}

.breadcrumb-arrow .breadcrumb-item a {
  position: relative;
  color: #fff;
  text-decoration: none;
  background-color: #3bafda;
  border: 1px solid #3bafda;
}

.breadcrumb-arrow .breadcrumb-item a:after,
.breadcrumb-arrow .breadcrumb-item a:before {
  position: absolute;
  top: -1px;
  width: 0;
  height: 0;
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.breadcrumb-arrow .breadcrumb-item a:before {
  right: -10px;
  z-index: 3;
  border-left-color: #3bafda;
  border-left-style: solid;
  border-left-width: 11px;
}

.breadcrumb-arrow .breadcrumb-item a:after {
  right: -11px;
  z-index: 2;
  border-left: 11px solid #2494be;
}

.breadcrumb-arrow .breadcrumb-item a:focus,
.breadcrumb-arrow li a:hover {
  background-color: #4fc1e9;
  border: 1px solid #4fc1e9;
}

.breadcrumb-arrow .breadcrumb-item a:focus:before,
.breadcrumb-arrow li a:hover:before {
  border-left-color: #4fc1e9;
}

.breadcrumb-arrow li.active:after,
.breadcrumb-arrow li.active:before {
  border-left-color: #2494be;
}

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
  min-height: 100vh;
  background-color: #00d2ff;
  background-image: linear-gradient(147deg, #00d2ff 0%, #3a7bd5 100%);
}

.text-uppercase {
  letter-spacing: 0.15em;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container py-5">
  <!-- For Demo Purpose -->
  <header class="text-center text-white">
    <h1 class="display-4">Bootstrap breadcrumbs</h1>
    <p class="lead mb-0">Some Bootstrap 4 breadcrumb variants with different dividers.</p>
    <p class="font-italic">Snippet by <a href="https://bootstrapious.com" class="text-white">
        <u>Bootstrapious</u></a>
    </p>
  </header>

  <div class="py-5">
    <div class="row">
      <div class="col-lg-9 mx-auto">
        <div class="card shadow mb-4">
          <div class="card-body shadow-sm p-5">
            <!-- Default breadcrumb-->
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#" class="text-uppercase">Home</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-uppercase">Library</a></li>
                <li aria-current="page" class="breadcrumb-item active text-uppercase">Data</li>
              </ol>
            </nav>
            <h5 class="text-muted">Default Bootstrap breadcrumb </h5>
            <p class="font-italic text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
          </div>
        </div>

        <div class="card shadow mb-4">
          <div class="card-body shadow-sm p-5">
            <!-- Arrow breadcrumb-->
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb breadcrumb-bullet">
                <li class="breadcrumb-item"><a href="#" class="text-uppercase">Home</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-uppercase">Library</a></li>
                <li aria-current="page" class="breadcrumb-item active text-uppercase">Data</li>
              </ol>
            </nav>
            <h5 class="text-muted">Breadcrumb with bullets</h5>
            <p class="font-italic text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
          </div>
        </div>

        <div class="card shadow mb-4">
          <div class="card-body shadow-sm p-5">
            <!-- Caret breadcrumb-->
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb breadcrumb-caret">
                <li class="breadcrumb-item"><a href="#" class="text-uppercase">Home</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-uppercase">Library</a></li>
                <li aria-current="page" class="breadcrumb-item active text-uppercase">Data</li>
              </ol>
            </nav>
            <h5 class="text-muted">Breadcrumb with carets</h5>
            <p class="font-italic text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
          </div>
        </div>

        <div class="card shadow mb-4">
          <div class="card-body shadow-sm p-5">
            <!-- Arrow breadcrumb-->
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb breadcrumb-arrow p-0">
                <li class="breadcrumb-item"><a href="#" class="text-uppercase pl-3">Home</a></li>
                <li class="breadcrumb-item pl-0"><a href="#" class="text-uppercase">Library</a></li>
                <li aria-current="page" class="breadcrumb-item pl-0 active text-uppercase pl-4">Data</li>
              </ol>
            </nav>
            <h5 class="text-muted">Breadcrumb with arrows</h5>
            <p class="font-italic text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
</body>
</html>

3. Breadcrumb bootstrap with Multiple Levels

Made by Rense Huijg. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <link rel='stylesheet' href="https://w2ui.com/src/w2ui-1.4.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
</head>
<body>
  <h4><i>overwrite default bootstrap breadcrumb</i></h4>
<div class="container-fluid">
  <div class="grexxwidget grexxbreadcrumbwidget grexxreloadablewidget ">
    <ol class="breadcrumb">
      <li> <a href="#"> Homepage</a> </li>
      <li> <a href="#"> level 2 </a> </li>
      <li> <a href="#"> level 3 </a> </li>
      <li> <a href="#"> level 4 </a> </li>
      <li> <a href="#"> level 5 </a> </li>
      <li> <a href="#"> level 6 </a> </li>
      <li> <a href="#"> level 7 </a> </li>
      <li class="active">lowest level</li>
    </ol>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

4. Bootstrap Breadcrumb Simple

Made by inimist. Source

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 Breadcrumb</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
      .bs-example{
      margin: 20px;        
      }
    </style>
  </head>
  <body>
    <div class="bs-example">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Products</a></li>
          <li class="breadcrumb-item active">Accessories</li>
        </ol>
      </nav>
    </div>
</body>
</html>

5. Bootstrap Breadcrumb Material Design & Bootstrap 4

Made by MDBootstrap. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css'>
<style>
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: #2E2E2E;
}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: #eeeeee; }

.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
    color: #455a64; } 


.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: #fff; }
.light-font .breadcrumb-item.active {
    color: #cfd8dc; }

.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: #000; }
.dark-font .breadcrumb-item.active {
    color: #455a64; }
</style>
</head>
<body>
  <body class="hm-gradient">
    
    <main>
            <!-- Grid row -->
            <div class="row">
            
                <!-- Grid column -->
                <div class="col-md-12">
            
                    <div class="card p-3">
                        <div class="card-block">
                            
                            <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>

                            <div class="bc-icons pb-4">

                                <ol class="breadcrumb purple darken-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 darken-4">
                                    <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 red darken-4">
                                    <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>

                            <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>
                                                            
                        </div>
                    </div>
            
                </div>
                <!-- Grid column -->
            
            </div>
            <!-- Grid row -->

        </div>
        <!--MDB -->
    </main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js'></script>
</body>
</html>
 

6. Basic breadcrumb

Made by sebavien. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body{
	padding:50px;
}


.breadcrumb {
	padding: 8px 15px;
	margin-bottom: 20px;
	list-style: none;
	background-color: #f5f5f5;
	border-radius: 4px;
}
.breadcrumb > li {
	display: inline-block;
}
.breadcrumb > li + li:before {
	padding: 0 5px;
	color: #ccc;
	content: "/\00a0";
}
.breadcrumb > .active {
	color: #777;
}
</style>
</head>
<body>
  <ol class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Library</a></li>
	<li class="active">Data</li>
</ol>
</body>
</html>