Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Examples

Basic

Preview

With Icons

Preview

Icon Only

Preview

With Ellipsis

Preview

Custom Separator

Preview

API

Component	Description	Usage
Breadcrumb	Root navigation element with aria-label	Wraps the entire breadcrumb navigation
BreadcrumbList	Ordered list container for breadcrumb items	Groups all breadcrumb items together
BreadcrumbItem	Individual breadcrumb item container	Wraps links, pages, or ellipsis
BreadcrumbLink	Clickable link for navigable breadcrumb items	For items that link to other pages
BreadcrumbPage	Non-interactive current page indicator	For the current/active page
BreadcrumbSeparator	Visual separator between items	Displays chevron or custom separator
BreadcrumbEllipsis	Ellipsis indicator for collapsed items	Shows when breadcrumb path is too long

Property	Type	Default	Description
className	string	-	Additional CSS classes for the nav element.
…props	React.ComponentProps<“nav”>	-	All native nav props are supported.

BreadcrumbList

Property	Type	Default	Description
className	string	-	Additional CSS classes for the ordered list.
…props	React.ComponentProps<“ol”>	-	All native ol props are supported.

BreadcrumbItem

Property	Type	Default	Description
icon	React.ReactNode	-	Optional icon displayed to the left of the item content with gap-2 spacing.
className	string	-	Additional CSS classes for the list item.
…props	React.ComponentProps<“li”>	-	All native li props are supported.

BreadcrumbLink

Property	Type	Default	Description
asChild	boolean	false	Use Radix Slot to merge props onto child element (useful for Next.js Link).
href	string	-	The URL the link points to.
className	string	-	Additional CSS classes for the anchor element.
…props	React.ComponentProps<“a”>	-	All native anchor props are supported.

BreadcrumbPage

Property	Type	Default	Description
className	string	-	Additional CSS classes for the span element.
…props	React.ComponentProps<“span”>	-	All native span props are supported.

BreadcrumbSeparator

Property	Type	Default	Description
children	React.ReactNode	ChevronRightMd icon	Custom separator content. Defaults to a chevron icon if not provided.
className	string	-	Additional CSS classes for the list item.
…props	React.ComponentProps<“li”>	-	All native li props are supported.

BreadcrumbEllipsis

Property	Type	Default	Description
className	string	-	Additional CSS classes for the span element.
…props	React.ComponentProps<“span”>	-	All native span props are supported.

Last updated on January 8, 2026