Breadcrumb
Breadcrumb is a neobrutalist React component from Cruise UI. Where a page sits in the site; the middle collapses into "…" on phones. Install it with npx shadcn@latest add @cruiseui/breadcrumb.
Install
Terminal
npx shadcn@latest add @cruiseui/breadcrumbFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
import { CruiseBreadcrumb } from "@/components/cruise/breadcrumb";
export default function BreadcrumbExample() {
return (
<CruiseBreadcrumb
items={[
{ label: "Home", href: "#" },
{ label: "Shop", href: "#" },
{ label: "Cakes", href: "#" },
{ label: "Birthday cakes", href: "#" },
{ label: "Classic Celebration Cake" },
]}
/>
);
}
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li class="breadcrumb-more-item menu-wrap" data-menu>
<span class="breadcrumb-sep" aria-hidden="true">/</span>
<button type="button" class="breadcrumb-more" aria-haspopup="menu" aria-expanded="false" aria-controls="crumb-menu" aria-label="Show 3 more pages">…</button>
<div class="menu" role="menu" id="crumb-menu" hidden>
<a class="menu-item" role="menuitem" tabindex="-1" href="/shop">Shop</a>
<a class="menu-item" role="menuitem" tabindex="-1" href="/shop/cakes">Cakes</a>
<a class="menu-item" role="menuitem" tabindex="-1" href="/shop/cakes/birthday">Birthday cakes</a>
</div>
</li>
<li data-middle><span class="breadcrumb-sep" aria-hidden="true">/</span><a href="/shop">Shop</a></li>
<li data-middle><span class="breadcrumb-sep" aria-hidden="true">/</span><a href="/shop/cakes">Cakes</a></li>
<li data-middle><span class="breadcrumb-sep" aria-hidden="true">/</span><a href="/shop/cakes/birthday">Birthday cakes</a></li>
<li><span class="breadcrumb-sep" aria-hidden="true">/</span><span aria-current="page">Classic Celebration Cake</span></li>
</ol>
</nav>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Deep sites (shops, docs, settings) where people step back up.
When not to
Sites one or two levels deep.
Props
CruiseBreadcrumb
| Prop | Type | Default | Description |
|---|---|---|---|
items | CruiseCrumb[] | — | — |
separator? | "slash" | "chevron" | "chevron" | — |
popupClassName? | string | — | Extra classes on the "…" menu, e.g. "nepa-mode" (it renders in <body>). |
className? | string | — | — |
Accessibility
- <nav aria-label="Breadcrumb"> with an <ol>; the last item has aria-current="page" and is not a link.
- The "…" button has an aria-label and opens a keyboard-friendly menu.