components / 25
marked breadcrumb
a route should feel traveled, not generated. each separator leaves a small trace while the current place gets the final mark.
shadcn
npx shadcn@latest add berkantay/cheez/marked-breadcrumblive
chevron · underlinethe path remembers the hand
current route/cheez/components/breadcrumb
separator
current mark
size
ink
character
<MarkedBreadcrumb
separator="chevron"
tone="orange"
size="medium"
currentMark="underline"
character="rushed"
>
<MarkedBreadcrumbList>
<MarkedBreadcrumbItem>
<MarkedBreadcrumbLink href="/cheez">cheez</MarkedBreadcrumbLink>
</MarkedBreadcrumbItem>
<MarkedBreadcrumbSeparatorMark />
<MarkedBreadcrumbItem>
<MarkedBreadcrumbPage>breadcrumb</MarkedBreadcrumbPage>
</MarkedBreadcrumbItem>
</MarkedBreadcrumbList>
</MarkedBreadcrumb>grammar
direction without an icon fontfour ways to say then
overflow
a button, not decorative dotsomission stays reversible
arrival
aria-current never changesone place, four kinds of emphasis
reference
native slots, inherited visualsapi
| prop | type | default | purpose |
|---|---|---|---|
label | string | "breadcrumb" | accessible navigation name |
size | "small" | "medium" | "large" | "medium" | text and separator rhythm |
tone | MarkedBreadcrumbTone | "orange" | built-in ink palette |
color | string | tone color | custom ink override |
separator | "chevron" | "slash" | "arrow" | "dot" | "chevron" | hand-drawn route grammar |
currentMark | CheezType | "underline" | persistent current-page mark |
hoverMark | CheezType | "short-underline" | link interaction mark |
character | CheezCharacter | "rushed" | drawing personality |
thickness | number | 1 | non-scaling pen weight |
wrap | boolean | false | wrap instead of horizontal scroll |
Page | span props | — | sets aria-current=page |
Ellipsis.expanded | boolean | undefined | disclosure state for omitted routes |
Ellipsis.label | string | state-aware | accessible button name |
behavior notes
- the root renders nav and the list renders an ordered list
- only the final page receives aria-current="page"
- separators are presentation-only and hidden from assistive technology
- collapsed routes use a real button with a state-aware accessible label
- links accept ordinary anchor props and refs without intercepting navigation
- long current labels truncate visually while preserving their full accessible text
- without wrap, long routes scroll horizontally instead of breaking their order