What is Breadcrumbs?

A breadcrumb trail lists the path from the root of a site to the current page, such as Home, Settings, Billing, Invoices. Each ancestor is a link and the last item is the current page. Breadcrumbs answer two questions at a glance: where am I, and how do I get to the level above. They are secondary navigation, so they sit above the page title and never replace the main menu. They describe location in a hierarchy, not the user's history, so they look the same no matter how someone arrived.

When to use it

• Deep hierarchies of three or more levels: docs, admin consoles, file managers, e-commerce categories.
• Landing on a deep page from search. Breadcrumbs give visitors who skipped the home page a way to explore upward.
• Skip them on flat sites with one or two levels, where they only repeat the main navigation.

Accessibility

The WAI-ARIA breadcrumb pattern is plain HTML with two attributes. Wrap the trail in a nav element with aria-label="Breadcrumb" so it appears as a named landmark. Put the links in an ordered list, since order is the point. Mark the last item with aria-current="page". Separators such as chevrons or slashes are decoration: draw them with CSS or give the icons aria-hidden, so screen readers do not announce "slash" between every item.

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm">
    <li><a href="/settings">Settings</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/settings/billing">Billing</a></li>
    <li aria-hidden="true">/</li>
    <li><span aria-current="page">Invoices</span></li>
  </ol>
</nav>

For search engines, add BreadcrumbList structured data in JSON-LD with the same items. Google can then show the path in results instead of a raw URL.

Common mistakes

• Linking the current page. A link to where you already are is a dead end. Render it as text with aria-current.
• Showing every level on mobile. Collapse the middle of long trails into an overflow menu and keep the first and last two items, as BreadcrumbEllipsis does.
• Tiny tap targets. Breadcrumb links are often 12px text. Pad them so each target is at least 24 by 24 CSS pixels, the WCAG 2.2 minimum.
• Using page titles that do not match the headings users see after clicking. Labels should match the destination's title.

MiniDev's Breadcrumb renders the named nav landmark and aria-current for you from an items array. Find related patterns in the navigation category, including pagination for moving across items at the same level.