Components
Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.
npx @21st-dev/cli add reshaped/reshaped-breadcrumbsLoading preview...
import { Reshaped } from "reshaped/bundle";
import Breadcrumbs from "@/components/ui/reshaped-breadcrumbs";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<Breadcrumbs expandAriaLabel="Expand breadcrumbs">
<Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>
<Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>
<Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
<Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...