Skip to content
aidsgnaidsgnaidsgn

Breadcrumb

aidsgn-breadcrumb enhances an authored native navigation, list, and breadcrumb items into styled breadcrumb navigation.

<aidsgn-breadcrumb label="Breadcrumb">
<nav class="aidsgn-breadcrumb__nav" aria-label="Breadcrumb"><ol class="aidsgn-breadcrumb__list"><li class="aidsgn-breadcrumb__item"><span class="aidsgn-breadcrumb__content"><a class="aidsgn-breadcrumb__link" href="/">Home</a></span><span class="aidsgn-breadcrumb__separator" aria-hidden="true">/</span></li><li class="aidsgn-breadcrumb__item"><span class="aidsgn-breadcrumb__content"><a class="aidsgn-breadcrumb__link" href="/components/">Components</a></span><span class="aidsgn-breadcrumb__separator" aria-hidden="true">/</span></li><li class="aidsgn-breadcrumb__item"><span class="aidsgn-breadcrumb__content" aria-current="page">Breadcrumb</span></li></ol></nav>
</aidsgn-breadcrumb>

Use links for ancestor pages and text for the current page. The final item receives aria-current="page", separators are hidden from assistive technology, and long paths wrap in source order.

Usage guidelines

Section titled “Usage guidelines”
A Breadcrumb follows Home, Components, and Button, with Button shown as the current page.A Breadcrumb follows Home, Components, and Button, with Button shown as the current page.
Do

Reflect the information hierarchy

Show the page’s real position in the product structure and mark the final item as the current page.

A Breadcrumb uses the concise destination labels Home, Orders, and Order 1042.A Breadcrumb uses the concise destination labels Home, Orders, and Order 1042.
Do

Use recognizable labels

Keep labels short while ensuring each destination still makes sense outside the surrounding trail.

A Breadcrumb incorrectly repeats a browsing trail from Search through Product and Reviews back to Product.A Breadcrumb incorrectly repeats a browsing trail from Search through Product and Reviews back to Product.
Don’t

Avoid browsing history

Breadcrumb describes hierarchy, not the sequence of pages someone happened to visit.

Every Breadcrumb item, including the current Button page, is incorrectly styled as a link.Every Breadcrumb item, including the current Button page, is incorrectly styled as a link.
Don’t

Do not relink the current page

Render the final item as the current location instead of a redundant link back to itself.