Robert Birming

Breadcrumb

Show readers where they are with a simple breadcrumb trail. Great for multi-level sites with categories, tags, or nested sections.1

Preview

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>Current page</li>
  </ol>
</nav>

Styles

/* Breadcrumb | robertbirming.com */
.breadcrumb {
  margin-block: -0.8rem var(--space-block);
  font-size: var(--font-small);
  color: var(--muted);
}

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

.breadcrumb li + li::before {
  content: "›";
  margin-inline-end: 0.3em;
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:visited {
  color: var(--link);
}

@media (hover: hover) {
  .breadcrumb a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.12em;
  }
}

Want more? Check out all available Bearming add-ons.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩