How to make Breadcrumb using HTML and CSS

In this tutorial, we are going to learn to make Breadcrumbs using HTML and CSS.

A breadcrumb or breadcrumb trail is a graphical control element used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.

Source Code :

<style>
  ul.bread{
    padding:10px 16px;
    list-style: none;
    background: #eee;
  }
  ul.bread li{
    display: inline;
    font-size: 18px;
  }
  ul.bread li+li:before{
    padding:8px;
    color:#000;
    content:"/\00a0";
  }
  ul.bread li a{
    color:#0275d8;
    text-decoration: none;
  }
  ul.bread li a:hover{
    color:#01447e;
    text-decoration: underline;
  }

</style>

<h1 style="text-align: center;"> How to make a Breadcrumb using HTML and CSS</h1>

<hr>

<ul class="bread">
  <li>
    <a href="#">
      Home
    </a>
  </li>
  <li>
    <a href="#">
      Settings
    </a>
  </li>
  <li>
    <a href="#">
      Profile
    </a>
  </li>
  <li>
    Change Password
  </li>
</ul>