Components
Breadcrumb
Displays the path to the current page using a hierarchy of links, helping users orient within nested navigation.
Install
npx shadcn@latest add https://atomx.acau.net/r/breadcrumb.jsonUsage
Breadcrumb is a composable <nav aria-label="breadcrumb"> wrapper. Build the trail from a BreadcrumbList of BreadcrumbItems: use BreadcrumbLink for navigable ancestors and BreadcrumbPage for the current page (it is marked aria-current="page" and is not a link).
Place a BreadcrumbSeparator between items — it renders a chevron by default, or any custom child you pass. For long trails, collapse the middle with BreadcrumbEllipsis. To integrate with a router, render the link through your router's component with BreadcrumbLink asChild.
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Settings</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Preview
Multi-segment trail
Collapsed with ellipsis
Props
All parts extend their underlying HTML element.
| Component | Extends | Notes |
|---|---|---|
Breadcrumb | <nav> | Wrapper, labelled breadcrumb. |
BreadcrumbList | <ol> | Ordered list of items. |
BreadcrumbItem | <li> | A single segment. |
BreadcrumbLink | <a> | Navigable ancestor. Accepts asChild to use a router link. |
BreadcrumbPage | <span> | The current page; non-interactive, aria-current="page". |
BreadcrumbSeparator | <li> | Divider; renders a chevron unless a child is passed. |
BreadcrumbEllipsis | <span> | Collapses omitted middle segments. |