# Breadcrumb

> Hierarchical navigation trail with custom separators and truncation.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/breadcrumb

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { Breadcrumb } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { Breadcrumb } from "@sisyphos-ui/react";

export const Crumbs = () => (
  <Breadcrumb
    items={[
      { label: "Home", href: "/" },
      { label: "Projects", href: "/projects" },
      { label: "Sisyphos UI" },
    ]}
  />
);
```

### Vue 3+

```vue
<script setup lang="ts">
import { Breadcrumb } from "@sisyphos-ui/vue";

const items = [
  { label: "Home", href: "/" },
  { label: "Projects", href: "/projects" },
  { label: "Sisyphos UI" },
];
</script>

<template>
  <Breadcrumb :items="items" />
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { Breadcrumb } from "@sisyphos-ui/angular";

@Component({
  selector: "app-crumbs",
  standalone: true,
  imports: [Breadcrumb],
  template: `<sui-breadcrumb [items]="items" />`,
})
export class CrumbsComponent {
  items = [
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Sisyphos UI" },
  ];
}
```

## Examples

### Default

```tsx
import { Breadcrumb } from "@sisyphos-ui/react";

export function Example() {
  return (
    <Breadcrumb
      items={[
        { label: "Home",       href: "/" },
        { label: "Docs",       href: "/docs" },
        { label: "Components", href: "/docs/components" },
        { label: "Breadcrumb" },
      ]}
    />
  );
}
```

### Collapsed middle

Set `maxItems` with `itemsBeforeCollapse` + `itemsAfterCollapse` to keep the trail compact on deep hierarchies.

```tsx
import { Breadcrumb } from "@sisyphos-ui/react";

export function Example() {
  return (
    <Breadcrumb
      maxItems={4}
      itemsBeforeCollapse={1}
      itemsAfterCollapse={2}
      items={[
        { label: "Home", href: "#" },
        { label: "Workspaces", href: "#" },
        { label: "Acme", href: "#" },
        { label: "Projects", href: "#" },
        { label: "Website redesign", href: "#" },
        { label: "Tasks", href: "#" },
        { label: "Q4 roadmap" },
      ]}
    />
  );
}
```

### With icons

Each item accepts an `icon` ReactNode.

```tsx
import { Breadcrumb } from "@sisyphos-ui/react";

const FolderIcon = () => (
  <svg viewBox="0 0 24 24" width={14} height={14} aria-hidden="true">
    <path fill="currentColor" d="M10 4H2v16h20V6H12l-2-2z" />
  </svg>
);

export function Example() {
  return (
    <Breadcrumb
      items={[
        { label: "Files", href: "#", icon: <FolderIcon /> },
        { label: "Workspace", href: "#", icon: <FolderIcon /> },
        { label: "Design", href: "#", icon: <FolderIcon /> },
        { label: "components.fig" },
      ]}
    />
  );
}
```

### Custom separator

Pass any ReactNode via `separator`.

```tsx
import { Breadcrumb } from "@sisyphos-ui/react";

export function Example() {
  return (
    <Breadcrumb
      separator={<span aria-hidden="true">›</span>}
      items={[
        { label: "Dashboard", href: "#" },
        { label: "Reports", href: "#" },
        { label: "Revenue", href: "#" },
        { label: "Q3 2026" },
      ]}
    />
  );
}
```

<!-- exports: { "Breadcrumb": "@sisyphos-ui/react" } -->