Creating Breadcrumbs Navigation

To create breadcrumbs navigation in HTML, use a list (ul) within a nav element and style it horizontally with CSS.

Breadcrumbs help the user understand their current position within a site's hierarchy. They can be very useful for complex sites, as they provide an easy way for the user to jump back to a higher-level page.

The Basic HTML Structure

Each "crumb" in your breadcrumb trail should be a link within a list item:

Notice the aria-label="Breadcrumb" attribute on the nav element. This tells screen readers exactly what kind of navigation this is, making it accessible to screen reader users.

Styling and Separators

To make the list horizontal, set the display property to flex or inline-block. You can then use the ::before or ::after pseudo-element to add a separator character, like a slash (/) or an arrow (>), between each item.

Full Working Example

In the following example, the breadcrumbs are styled horizontally and include separators:

<!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>

View Output Full Screen Preview

The Last Item

The last item in the list should usually not be a link, as it represents the current page. You can style it differently (e.g., with a different color) to distinguish it from the clickable links in the trail. You can also add aria-current="page" to this item to help accessibility further.