Breadcrumb

Updated 2 months ago
Components
Tokens-backed WCAG 2.2 AAA target

Hierarchy trail to the current page — useful when nested deeper than two levels.

Rendered from components/breadcrumb/recipe.json

When to use Breadcrumb

Use a breadcrumb when the user is more than two levels deep in content hierarchy and the parent context is not visible elsewhere (sidebar, page header). Skip the breadcrumb when the parent is already in the sidebar — duplicating navigation surface adds cost without adding clarity.

The current page is the last item, marked aria-current="page", and is not a link.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.