Show page depth in nested structures
Breadcrumb
Hierarchical path navigation that reveals current page context.
- .source-breadcrumb Navigation container
- .source-breadcrumb-list Ordered list of path items
- .source-link Clickable ancestor item
- .source-breadcrumb-current Current page item
- .source-breadcrumb-separator Auto-injected separator
States
StateAppearance
LinkSecondary text with hover emphasis.
CurrentPrimary text and
aria-current="page".FocusFocus-visible outline on links.
Design intent
Breadcrumb answers 'where am I in the hierarchy?' It shows structure, not navigation history. It only makes sense when there are three or more levels of depth, and when the user might want to step back up. On top-level pages or in flat information architectures, hide it entirely.
When to use
Do
Keep path segments short and stable
Mark only the last item as current
Don't
Use breadcrumbs for flat information architecture
Use breadcrumbs as primary app navigation
Use breadcrumb as a substitute for browser back navigation
Separator
Default separator is /. Use custom separators only if they improve readability and stay visually subtle.
Designer checklist
- Every item except the current page links to a navigable destination.
- The current page item has
aria-current="page"and is not a link. - Labels match the exact titles of the pages they represent.
- Breadcrumb is hidden on root and top-level pages.
Breadcrumb props
PropTypeDefaultDescription
childrenReactNoderequiredBreadcrumbItem elements.
separatorReactNode/Rendered between items.
BreadcrumbItem props
PropTypeDefaultDescription
hrefstringnullLink destination for non-current items.
currentbooleanfalseMarks current page item.
Basic usage
import { Breadcrumb, BreadcrumbItem } from '@pierredelattre/source-react';
<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/components">Components</BreadcrumbItem>
<BreadcrumbItem current>Button</BreadcrumbItem>
</Breadcrumb>Custom separator
<Breadcrumb separator="›">
<BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
<BreadcrumbItem current>Tokens</BreadcrumbItem>
</Breadcrumb>Component tokens
TokenDefault
--source-breadcrumb-color--source-color-text-secondary
--source-breadcrumb-color-current--source-color-text
--source-breadcrumb-gap--source-spacing-2
ARIA attributes
AttributePurpose
nav[aria-label="Breadcrumb"]Identifies breadcrumb landmark.
aria-current="page"Marks final active segment.
Keyboard support
KeyBehavior
TabMoves through breadcrumb links.
EnterActivates focused link.