Breadcrumb

How to use it

Use near the top of a page that sits deep in a hierarchy, such as a project's settings, so people can see where they are and go back up one or more levels. List the ancestors in order from the root, link each of them, and end with the current page; the preview's links lead to this site's own pages, so replace them with yours. Do not use it as the only navigation, and keep each label to a word or two.

Accessibility

The trail is an ordered list inside <nav aria-label="Breadcrumb">, so screen readers announce it as breadcrumb navigation and how many levels it has. The current page is marked with aria-current="page" rather than by style alone, and the slash separators are aria-hidden so they are not read out between links. Links (#1d4ed8) and the current page (#0f172a) on white both exceed 4.5:1, and every link shows a focus outline.

Source (copy-ready)

Copy code

<nav class="dcl-breadcrumb" aria-label="Breadcrumb">
  <ol class="dcl-breadcrumb__list">
    <li class="dcl-breadcrumb__item"><a class="dcl-breadcrumb__link" href="../index.html">Home</a><span class="dcl-breadcrumb__sep" aria-hidden="true">/</span></li>
    <li class="dcl-breadcrumb__item"><a class="dcl-breadcrumb__link" href="../index.html">Components</a><span class="dcl-breadcrumb__sep" aria-hidden="true">/</span></li>
    <li class="dcl-breadcrumb__item"><a class="dcl-breadcrumb__link dcl-breadcrumb__link--current" href="breadcrumb.html" aria-current="page">Breadcrumb</a></li>
  </ol>
</nav>
<style>
.dcl-breadcrumb { font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.dcl-breadcrumb__item { display: inline-flex; align-items: center; gap: 0.25rem; }
.dcl-breadcrumb__link { color: #1d4ed8; background-color: #ffffff; text-decoration: underline; text-underline-offset: 0.2em; }
.dcl-breadcrumb__link:hover { color: #1e3a8a; background-color: #ffffff; }
.dcl-breadcrumb__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-breadcrumb__link--current { color: #0f172a; background-color: #ffffff; text-decoration: none; font-weight: 600; }
.dcl-breadcrumb__sep { color: #475569; background-color: #ffffff; }
</style>