Preview loads on approachPreview loads on approach
Exact source · breadcrumbs-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Breadcrumbs, BreadcrumbItem} from '@astryxdesign/core/Breadcrumbs';
export default function BreadcrumbsShowcase() {
return (
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
<BreadcrumbItem isCurrent>My Project</BreadcrumbItem>
</Breadcrumbs>
);
}
Usage
Breadcrumbs show a trail of links from the root to the current page. Use them at the top of detail pages, settings panels, or anywhere the user needs to see where they are and navigate back up.
Place breadcrumbs above the page heading so the user sees their location before reading the content.
Keep labels short and match the page titles they link to: "Settings" not "Application Settings Page".
Use the supporting variant in dense UIs like admin panels or sidebars where the breadcrumb should be subtle.
Make the last item plain text, not a link; it represents the current page. The component does this automatically when you set isCurrent.
The component implements the WAI-ARIA APG Breadcrumb pattern: a labelled nav landmark wrapping an ordered list, with aria-current="page" on the current item. A crumb with a menu additionally implements the APG Menu Button pattern, opening on Enter, Space or ArrowDown and closing on Escape.
Give each trail its own label when a page renders more than one, so the nav landmarks stay distinguishable in a screen reader landmark list.
Use breadcrumbs as the primary navigation. They supplement a sidebar or top nav, not replace it.
Show breadcrumbs on top-level pages that have no parent; they add clutter without helping the user.
Let the trail grow beyond 5 levels. If you need more, consider simplifying the page hierarchy instead.
The built-in slash separator mirrors automatically in RTL. For a custom separator, leave Unicode-mirrored angle quotes such as › alone; mirror arrows and Icon separators once with rtlStyles.mirror.
Mirror a separator the bidi algorithm already mirrors. An angle-quote glyph such as › is Bidi_Mirrored, so it flips under RTL on its own and rtlStyles.mirror would flip it back. An arrow glyph such as → and any Icon separator are not, so those do need rtlStyles.mirror through xstyle.
Typed props
Breadcrumbs
Prop
Type and behavior
children
ReactNode · required
BreadcrumbItem elements to render inside the breadcrumb trail.
Visual variant: supporting is smaller with secondary text styling.
label
string · default 'Breadcrumb'
Accessible label for the nav landmark (aria-label).
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value: not an inline style object like style={{}}.
BreadcrumbItem
Prop
Type and behavior
children
ReactNode · required
Label content for the breadcrumb item.
href
string
URL the breadcrumb links to; omit for non-navigable items.
onClick
(e: MouseEvent) => void
Click handler for the breadcrumb item.
isCurrent
boolean
Marks this item as the current page, applying aria-current="page". When omitted, the last item is auto-detected if no item is explicitly current; pass false to opt out.
Custom link component to render instead of <a>. Overrides the provider-level default from LinkProvider. Only applies to non-current items.
menu
DropdownMenuOption[] | ReactNode
Menu opened when the item is activated, using the same item API as DropdownMenu/MoreMenu/ContextMenu (a DropdownMenuOption[] array or composed DropdownMenuItem children). Renders a link-styled menu trigger with a chevron and aria-haspopup="menu". Takes precedence over href/onClick.
menuSize
'sm' | 'md' | 'lg'
Size passed to the menu items. Defaults from the breadcrumb variant ('supporting' → 'sm', otherwise 'md').
Anatomy
Trail · required
The ordered list of links from root to current page.
Item · required
A single step in the trail. Renders as a link or plain text for the current page.
Separator · required
The character between items. Defaults to "/" but can be customized.
Icon · optional
An optional icon before an item label, like a home icon on the first item.
