How to create breadcrumb in html

HtmlHow-ToBeginner · 3 min read

How to Create Breadcrumb Navigation in HTML Easily

To create a breadcrumb in HTML, use the <nav> element with an aria-label for accessibility and an ordered list <ol> inside it. Each breadcrumb item is a list item <li>, usually containing links <a> except the current page, which is plain text.

📐

Syntax

A breadcrumb uses the <nav> element with aria-label="breadcrumb" to define navigation. Inside, an ordered list <ol> holds list items <li> representing each step. Links <a> are used for clickable steps, and the current page is plain text.

html

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li aria-current="page">Current Page</li>
  </ol>
</nav>

Output

Home > Category > Current Page

💻

Example

This example shows a breadcrumb with three steps: Home, Category, and the Current Page. The first two are links, and the last is plain text to indicate the current page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Breadcrumb Example</title>
  <style>
    nav[aria-label="breadcrumb"] ol {
      list-style: none;
      display: flex;
      gap: 0.5rem;
      padding: 0;
      margin: 1rem 0;
      font-family: Arial, sans-serif;
      font-size: 1rem;
    }
    nav[aria-label="breadcrumb"] li::after {
      content: ">";
      margin-left: 0.5rem;
    }
    nav[aria-label="breadcrumb"] li:last-child::after {
      content: "";
    }
    nav[aria-label="breadcrumb"] a {
      text-decoration: none;
      color: #007bff;
    }
    nav[aria-label="breadcrumb"] a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <nav aria-label="breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Category</a></li>
      <li aria-current="page">Current Page</li>
    </ol>
  </nav>
</body>
</html>

Output

Home > Category > Current Page

⚠️

Common Pitfalls

Not using aria-label="breadcrumb" on the <nav> can hurt accessibility.
Using unordered lists <ul> instead of ordered lists <ol> loses the sense of order.
Making the current page a link confuses users; it should be plain text.
Forgetting to style separators (like >) can make breadcrumbs hard to read.

html

<!-- Wrong: current page as link -->
<nav aria-label="breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Current Page</a></li> <!-- Incorrect -->
  </ol>
</nav>

<!-- Correct: current page as plain text -->
<nav aria-label="breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li aria-current="page">Current Page</li> <!-- Correct -->
  </ol>
</nav>

📊

Quick Reference

Wrap breadcrumbs in <nav aria-label="breadcrumb"> for accessibility.
Use <ol> for ordered steps.
Use <li> for each breadcrumb item.
Make all but the last item links <a>.
Style separators with CSS ::after pseudo-element.

✅

Key Takeaways

Use

Make all breadcrumb items links except the current page, which should be plain text.

Add CSS to show separators like > between breadcrumb items for clarity.

Always include accessibility attributes like aria-label to help screen readers.

Avoid common mistakes like linking the current page or missing the ordered list structure.