# Breadcrumbs

A breadcrumb trail for the org, project and environment you are in, collapsing on narrow screens.

Source page: https://sproutboat.com/ikada/components/breadcrumbs

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/breadcrumbs.json
```
Or from the package: `import { Breadcrumbs } from "@sproutboat/ikada";`
## Usage
```tsx
import { Breadcrumbs } from "@/components/ikada/breadcrumbs";

const items = [
  { label: "acme", href: "/acme" },
  { label: "robin", href: "/acme/robin" },
  { label: "production", href: "/acme/robin/production" },
  { label: "eu-west", href: "/acme/robin/production/eu-west" },
  { label: "Logs" },
];

<Breadcrumbs items={items} maxItems={3} />
```
## Examples
### Trail
Root first. The last item is the current page: plain text, marked aria-current.
```tsx
<Breadcrumbs
  items={[
    { label: "acme", href: "/acme" },
    { label: "robin", href: "/acme/robin" },
    { label: "Logs" },
  ]}
/>
```
### Collapsed
Past maxItems (4 by default) the middle levels fold into a menu. The first and last always show.
```tsx
const items = [
  { label: "acme", href: "/acme" },
  { label: "robin", href: "/acme/robin" },
  { label: "production", href: "/acme/robin/production" },
  { label: "eu-west", href: "/acme/robin/production/eu-west" },
  { label: "Logs" },
];

<Breadcrumbs items={items} />
```
### Wider limit

```tsx
const items = [
  { label: "acme", href: "/acme" },
  { label: "robin", href: "/acme/robin" },
  { label: "production", href: "/acme/robin/production" },
  { label: "eu-west", href: "/acme/robin/production/eu-west" },
  { label: "Logs" },
];

<Breadcrumbs items={items} maxItems={5} />
```
## Props
### BreadcrumbsProps
Also takes every prop of `Omit<ComponentProps<"nav">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| items | `readonly BreadcrumbItem[]` | Root first (Org, Project, Environment). The last item is the current page. |
| maxItems? | `number` | Past this many, the middle items collapse into a menu. The first and last always show. Default `4`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/breadcrumbs.tsx