How To Create Breadcrumbs Example

<!DOCTYPE html>
<html>
<head>
<title>Breadcrumbs Navigation Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }
  nav li {
    font-size: 14px;
  }
  /* Add a separator (/) between each link */
  nav li + li::before {
    content: "/";
    padding: 0 10px;
    color: #999;
  }
  nav a {
    color: #0275d8;
    text-decoration: none;
  }
  nav a:hover {
    color: #01447e;
    text-decoration: underline;
  }
  /* Current/Active page style */
  nav li:last-child {
    color: #6c757d;
  }
</style>
</head>
<body>

<nav aria-label="Breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">Tutorial</a></li>
    <li aria-current="page">How-to Articles</li>
  </ul>
</nav>

<div style="margin-top: 20px;">
  <p>The breadcrumbs above help the user understand exactly where they are on the website. Notice how the current page ("How-to Articles") is not a link and has a different color.</p>
</div>

</body>
</html>