**Breadcrumbs** are the navigation bars at the top of webpages; they allow you to see the hierarchy of a website. Let's see how a basic breadcrumb is made.​

1) Create a list (ordered/unordered) in HTML and add a few items; these items should be links:

<html>
 <head>
 </head>
 <body>
   
     <ol>
         <li> <a href="#"> Home     </a></li>
         <li> <a href="#"> Products </a></li>
         <li> <a href="#"> Reviews  </a></li>
     </ol>

 </body>
</html>

codemirror

2) Give a class to the list and list-items:

<html>
 <head>
 </head>
 <body>
   
     <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"> <a href="#"> Reviews  </a></li>
     </ol>

 </body>
</html>

3) Now use CSS to place them in a line. Add a background and adjust basic text styling:

.breadcrumb{
  padding: 10px 16px;
  list-style: none;
  background-color: #eed;
  }
  
.breadcrumb-item{
  display: inline;
  font-size: 18px;
  }

.breadcrumb{
  padding: 10px 16px;
  list-style: none;
  background-color: #eed;
  }
  
.breadcrumb-item{
  display: inline;
  font-size: 18px;
  }

.breadcrumb li+li:before{
  padding: 8px;
  color: black;
  content: ">>";
}

.breadcrumb{
  padding: 10px 16px;
  list-style: none;
  background-color: #eed;
  }
  
.breadcrumb-item{
  display: inline;
  font-size: 18px;
  }

.breadcrumb li+li:before{
  padding: 8px;
  color: black;
  content: ">>";
}

.breadcrumb-item a{
  color: #2e4053;
  text-decoration: none;
}

.breadcrumb-item a:hover{
  color: red;
}


How to make a breadcrumb in HTML / CSS 

Breadcrumbs are the navigation bars at the top of webpages; they allow you to see the hierarchy of a website. Let s see how a basic breadcrumb is made.​ 