All components
Breadcrumb
Hierarchical navigation trails with plain and underline link styles in three sizes.
Variants
plain
underline
Sizes
sm
md
lg
Install
zsh — breadcrumb
1bunx stylexblocks add breadcrumbUsage — Ark UI
breadcrumb.tsx
12345678910111213141516171819202122232425import { Breadcrumb } from "#components/ui/ark-ui/breadcrumb.tsx";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via context <Breadcrumb.Root aria-label="Breadcrumb" variant="plain" size="md"> <Breadcrumb.List> <Breadcrumb.Item> {/* composition: asChild swaps the anchor for your router's link */} <Breadcrumb.Link href="/">Home</Breadcrumb.Link> </Breadcrumb.Item> <Breadcrumb.Separator aria-hidden="true">/</Breadcrumb.Separator> <Breadcrumb.Item> <Breadcrumb.Link href="/projects">Projects</Breadcrumb.Link> </Breadcrumb.Item> <Breadcrumb.Separator aria-hidden="true">/</Breadcrumb.Separator> <Breadcrumb.Item> <Breadcrumb.CurrentLink aria-current="page"> Settings </Breadcrumb.CurrentLink> </Breadcrumb.Item> </Breadcrumb.List> </Breadcrumb.Root> );}