Atelier UI

Search components…

Search components…

Breadcrumb

Breadcrumb trail that collapses the middle into an expandable ellipsis.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

BreadcrumbProps

Also accepts all props of React.ComponentProps<"nav">

PropTypeDefaultDescription
items* requiredBreadcrumbItem[]——
separator"chevron" | "slash" | "dot""chevron"—
maxItemsnumber4Collapse the middle items behind an ellipsis when there are more than this many
pillbooleanfalseShow items as soft pills

Install

$ npx shadcn@latest add https://chromotion.dev/r/breadcrumb.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.

More like this