Bear Blog breadcrumb

Show readers where they are with a simple breadcrumb trail.

Great for multi-level sites with categories, tags, or nested sections.

Preview

Breadcrumb trail showing three levels of navigation

How to use

Add the markup anywhere on the page, typically right before the post title or main content. Adjust the links and labels to match your site structure.

Markup

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/section/">Section</a></li>
    <li><a href="/section/sub/">Sub</a></li>
    <li><span aria-current="page">Current page</span></li>
  </ol>
</nav>

Styles

.breadcrumb {
  margin-block: -0.8rem 1.5rem;
  font-size: calc(var(--font-scale) * 0.9);
  color: color-mix(in srgb, var(--text-color), transparent 25%);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "\203A";
  margin-inline-end: 0.4em;
}

Want more? Check out the full Bear Blog library.