ComponentsNavigation
Breadcrumb
A trail of links showing where you are, with the middle steps folded into a menu when it gets long.
Default
"use client";
import { Breadcrumb, Breadcrumbs } from "@/components/miyuki-ui/breadcrumb";
export default function BreadcrumbDemo() {
return (
<Breadcrumbs>
<Breadcrumb href="#home">Home</Breadcrumb>
<Breadcrumb href="#regions">Regions</Breadcrumb>
<Breadcrumb>Hokkaido</Breadcrumb>
</Breadcrumbs>
);
}Collapsed
"use client";
import { Breadcrumb, Breadcrumbs } from "@/components/miyuki-ui/breadcrumb";
export default function BreadcrumbCollapsedDemo() {
return (
<Breadcrumbs maxItems={4}>
<Breadcrumb href="#home">Home</Breadcrumb>
<Breadcrumb href="#regions">Regions</Breadcrumb>
<Breadcrumb href="#hokkaido">Hokkaido</Breadcrumb>
<Breadcrumb href="#niseko">Niseko</Breadcrumb>
<Breadcrumb href="#hirafu">Hirafu</Breadcrumb>
<Breadcrumb>Lift 4</Breadcrumb>
</Breadcrumbs>
);
}Install
npx shadcn@latest add @miyuki-ui/breadcrumbThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.