ComponentsNavigation
Breadcrumb
Where a page sits in the hierarchy, with links back up.
Theme
Motion
Where a page sits in the hierarchy, with links back up.
const trail = [
{ label: "Acme", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Website", href: "/projects/website" },
{ label: "Settings", href: "/projects/website/settings" },
{ label: "Domains" },
];
<Breadcrumb items={trail} />The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Breadcrumb } from "junco";
<Breadcrumb items={[{ label: "Projects", href: "/projects" }, { label: "Junco" }]} />Build it from parts when you need custom items, or your router's Link via asChild.
Breadcrumb#itemsmaxItemsseparatorrenderLinkclassNames| Prop | Type | Default |
|---|---|---|
itemsShorthand trail. Leave href off the last item (the current page). | { label: ReactNode; href?: string }[] | – |
maxItemsWith more items than this, the middle collapses to "…". | number | – |
separatorCustom separator. | ReactNode | a chevron |
renderLinkRender links through your router: (item, props) => <Link to={item.href} {...props} />. | (item, props) => ReactNode | – |
classNamesClass overrides for each part. | { root?, list?, item?, link?, page?, separator? } | – |
BreadcrumbLink#asChild| Prop | Type | Default |
|---|---|---|
asChildRender your router's Link as the child. | boolean | false |
BreadcrumbList / BreadcrumbItem / BreadcrumbPage / BreadcrumbSeparator / BreadcrumbEllipsis#Parts for composing it yourself.
className| Prop | Type | Default |
|---|---|---|
classNameExtra classes for that part. | string | – |