Overview
Breadcrumb shows the user’s current page location within a hierarchy, allowing navigation back to any parent level. It is purely navigational — each item except the last should be a link.Installation
Usage
Variants
Default
With Icons
Collapsed (with Ellipsis)
UseBreadcrumbEllipsis when the path is too long to display in full.
Custom Separator
API Reference
Breadcrumb
ReactNode
Custom separator element. Defaults to
ChevronRight icon.string
Additional class names for the
<nav> element.BreadcrumbLink
string
required
Navigation URL for the breadcrumb link.
boolean
default:"false"
Render as a child element (e.g. Next.js
<Link>).BreadcrumbPage
Marks the current page — renders as non-link text witharia-current="page".
BreadcrumbSeparator
ReactNode
Custom separator content. Defaults to a
ChevronRight icon.BreadcrumbEllipsis
Renders a··· button indicating hidden middle items. Typically wrapped in a DropdownMenu for expanded navigation.
Accessibility
- The wrapping
<nav>hasaria-label="breadcrumb"by default - The last item uses
aria-current="page"viaBreadcrumbPage - Separator elements use
aria-hidden="true"— they are purely decorative - All link items are keyboard focusable and support Enter navigation
BreadcrumbEllipsisshould open a dropdown showing the hidden items for full keyboard access
Do’s & Don’ts
Do
- Always make every item except the last a clickable link
- Use
BreadcrumbEllipsiswhen there are more than 4 levels deep - Reflect the actual URL hierarchy in breadcrumb items
- Keep breadcrumb labels short — match the page title
Don't
- Don’t use breadcrumb for flat navigation — it’s for hierarchical paths only
- Don’t include the site root (“Home”) if the path is already obvious
- Don’t make the current page (last item) a link — it’s already active
- Don’t truncate labels mid-word — use ellipsis only at the item level