Breadcrumbs

Breadcrumbs are the navigation trail at the top of every documentation page, from the docs root down to the current page. They show location without becoming a second table of contents: short, ordered from broad to specific, and most useful on deep pages.

This page renders the component live — the trail above the title, Documentation / Site / Components / Breadcrumbs, is its own breadcrumb.

When to use#

• Documentation pages only: the docs shell renders the trail on every page under /docs/, no other section uses it, and individual pages never add their own
• Show location, not navigation — the trail answers “where am I?” without becoming a second table of contents
• Keep it short and ordered from broad to specific; it earns its keep on deep pages

Implementation#

{{ partial "docs/breadcrumbs.html" . }}

<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
  <ol class="docs-breadcrumbs-list">
    <li><a href="/en/docs/">Documentation</a></li>
    <li><a href="/en/docs/site-implementation/">Site implementation</a></li>
    <li><a href="/en/docs/site-implementation/components/">Components</a></li>
    <li aria-current="page">Breadcrumbs</li>
  </ol>
</nav>

The Hugo partial is layouts/partials/docs/breadcrumbs.html, called once from the docs shell (layouts/partials/docs/shell.html), so pages never invoke it directly. It walks the page’s ancestors within the docs section, wraps the trail in an <ol> of <li> items per the WAI-ARIA breadcrumb pattern, links every ancestor, and marks the current page with a non-linked <li aria-current="page">. The aria-label comes from the brandDocsBreadcrumbLabel i18n key. The partial takes the page context and no options. There is no JavaScript; the / separators are CSS ::before content on .docs-breadcrumbs-list li + li, not DOM elements, and the rest of the styling is the .docs-breadcrumbs* rules in assets/css/site.css.

Accessibility#

• The trail is a <nav> landmark named “Breadcrumb” through aria-label, from the brandDocsBreadcrumbLabel i18n key, so screen readers can tell it apart from the site navigation
• The trail is a real <ol> of <li> items, so screen readers announce the position and length of the path, per the WAI-ARIA breadcrumb pattern
• The current page is the last <li>, carrying aria-current="page" with no link inside it; every ancestor <li> holds a regular link
• The / separators are CSS generated content, not DOM elements, so there is nothing for assistive technology to skip or announce
• Keyboard: Tab moves through the ancestor links and Enter follows one; the current-page item takes no focus
• Avoid linking the current page — the last item stays a non-interactive <li> with aria-current="page"