Skip to content
DocsTemplatesThemesComponentsPlayground
Get started
Type to search
↑↓Navigate↵SelectEscClose
Documentation
Documentation
Changelog
What's New
Guide
Guide
Getting Started
Principles
Styling Components
Theme System
Working with AI
Foundations
All Tokens
Color
Elevation
Icons
Illustrations
Motion
Shape
Spacing
Typography
Libraries
Libraries
@xds/cli
@xds/core
Themes
Themes
Chocolate Theme
Theme: daily
Default Theme
Gothic Theme
Theme: matcha
Neutral Theme
Stone Theme
Components
Components
AppShell
AspectRatio
Avatar
Avatar
AvatarGroup
AvatarGroupOverflow
AvatarStatusDot
Badge
Banner
Blockquote
Breadcrumbs
BreadcrumbItem
Breadcrumbs
Button
Button
ButtonGroup
IconButton
ToggleButton
ToggleButtonGroup
Calendar
Card
Carousel
Chat
ChatComposer
ChatComposerDrawer
ChatComposerInput
ChatComposerTokenElement
ChatDictationButton
ChatLayout
ChatLayoutScrollButton
ChatMessage
ChatMessageBubble
ChatMessageList
ChatMessageMetadata
ChatSendButton
ChatSystemMessage
ChatTokenizedText
ChatToolCalls
Checkbox
CheckboxInput
CheckboxList
CheckboxListItem
CircularProgress
ClickableCard
Code
CodeBlock
Collapsible
Collapsible
CollapsibleGroup
useXDSCollapsible
CommandPalette
CommandPalette
CommandPaletteEmpty
CommandPaletteFooter
CommandPaletteGroup
CommandPaletteInput
CommandPaletteItem
CommandPaletteList
ContextMenu
ContextMenu
ContextMenuItem
DateInput
DateRangeInput
DateTimeInput
Dialog
AlertDialog
Dialog
DialogHeader
useXDSImperativeAlertDialog
useXDSImperativeDialog
Divider
DropdownMenu
DropdownMenu
DropdownMenuItem
EmptyState
Field
Field
FieldLabel
FieldStatus
InputGroup
InputGroupText
FileInput
Heading
HoverCard
HoverCard
useXDSHoverCard
Icon
Item
Kbd
Layout
Center
FormLayout
Grid
GridSpan
HStack
Layout
LayoutContainer
LayoutContent
LayoutFooter
LayoutHeader
LayoutPanel
Section
StackItem
VStack
Lightbox
Link
List
List
ListItem
Markdown
MetadataList
MetadataList
MetadataListItem
MobileNav
MoreMenu
NavHeadingMenu
NavIcon
NumberInput
OverflowList
Pagination
Popover
Popover
useXDSPopover
PowerSearch
ProgressBar
Radio
RadioList
RadioListItem
Resizable
ResizeHandle
useXDSResizable
SegmentedControl
SegmentedControl
SegmentedControlItem
SelectableCard
Selector
MultiSelector
Selector
SelectorOption
SideNav
SideNav
SideNavCollapseButton
SideNavHeading
SideNavItem
SideNavSection
Skeleton
Slider
Spinner
StatusDot
Stepper
Step
Stepper
Switch
Table
BaseTable
Table
TableCell
TableHeaderCell
TableRow
useXDSTableColumnSettings
useXDSTablePagination
useXDSTableSelection
useXDSTableSelectionState
useXDSTableSortable
Tabs
Tab
TabList
TabMenu
Text
TextArea
TextInput
Thumbnail
TimeInput
Timestamp
Toast
Toast
useXDSToast
Token
Tokenizer
Toolbar
Tooltip
Tooltip
useXDSTooltip
TopNav
TopNav
TopNavHeading
TopNavItem
TopNavMegaMenu
TopNavMegaMenuFeaturedCard
TopNavMegaMenuItem
TopNavMenu
TreeList
Typeahead
BaseTypeahead
Typeahead
TypeaheadItem
Utilities
Utilities
LinkProvider
MediaTheme
SyntaxTheme
Theme
useClickableContainer
useEntryAnimation
useFocusTrap
useGridFocus
useImageMode
useInputContainer
useListFocus
useMediaQuery
useOverflow
useScrollLock
useScrollOverflow
useXDSLayer
useXDSStreamingText
Copyright © Meta Platforms, Inc.GitHub Pages | Terms of Use | Privacy Policy
Breadcrumbs@xds/core v0.0.14 · XDSBreadcrumbs

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.
ts
import {XDSBreadcrumbs} from '@xds/core/Breadcrumbs'

Best practices

GuidancePractices
DoPlace breadcrumbs above the page heading so the user sees their location before reading the content.
DoKeep labels short and match the page titles they link to — "Settings" not "Application Settings Page".
DoUse the supporting variant in dense UIs like admin panels or sidebars where the breadcrumb should be subtle.
DoMake the last item plain text, not a link — it represents the current page. The component does this automatically when you set isCurrent.
Don'tUse breadcrumbs as the primary navigation — they supplement a sidebar or top nav, not replace it.
Don'tShow breadcrumbs on top-level pages that have no parent — they add clutter without helping the user.
Don'tLet the trail grow beyond 5 levels — if you need more, consider simplifying the page hierarchy instead.

Examples

Common configurations, variations, and states.
Breadcrumbs — Separators
Swap the default
Breadcrumbs — Deep Path
A 5-level breadcrumb trail for deeply nested content. Use in e-commerce, file browsers, or any UI with several levels of hierarchy.
Breadcrumbs — Variants
Compare the default and supporting variants side by side. Use the supporting variant in dense UIs like admin panels where the breadcrumb should be subtle.
Breadcrumbs — Icons
Add icons before breadcrumb labels for quick recognition. Use a home icon on the root item and contextual icons on key sections.