Reshaped Breadcrumbs

Navigation

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Breadcrumbs to your project and fits it to your theme.

Code

How Reshaped Breadcrumbs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Reshaped } from "reshaped/bundle";
import Breadcrumbs from "@/components/ui/reshaped-breadcrumbs";

const ActivityIcon = () => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
  </svg>
);

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <Breadcrumbs color="primary" expandAriaLabel="Expand breadcrumbs">
          <Breadcrumbs.Item onClick={() => {}} icon={ActivityIcon}>
            Catalog
          </Breadcrumbs.Item>
          <Breadcrumbs.Item disabled>Shoes</Breadcrumbs.Item>
          <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
          <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
        </Breadcrumbs>
      </div>
    </Reshaped>
  );
}