# Breadcrumb

Breadcrumb navigation trail

## Installation

  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @termcn/breadcrumb
```

<Step>Copy and paste the following code into your project.</Step>

```tsx
import { Box, Text } from "ink";

import { useTheme } from "@/components/ui/theme-provider";
import { useInput } from "@/hooks/use-input";

export interface BreadcrumbItem {
  label: string;
  key: string;
  onSelect?: () => void;
}

export interface BreadcrumbProps {
  items: BreadcrumbItem[];
  separator?: string;
  activeKey?: string;
}

export const Breadcrumb = ({
  items,
  separator = "›",
  activeKey,
}: BreadcrumbProps) => {
  const theme = useTheme();

  const activeIndex =
    activeKey === undefined
      ? items.length - 1
      : items.findIndex((i) => i.key === activeKey);

  useInput((_input, key) => {
    if (key.leftArrow && activeIndex > 0) {
      const prev = items[activeIndex - 1];
      if (prev?.onSelect) {
        prev.onSelect();
      }
    }
  });

  return (
    <Box flexDirection="row" alignItems="center">
      {items.map((item, idx) => {
        const isActive = idx === activeIndex;
        return (
          <Box key={item.key} flexDirection="row" alignItems="center">
            <Text
              color={
                isActive ? theme.colors.primary : theme.colors.mutedForeground
              }
              bold={isActive}
            >
              {item.label}
            </Text>
            {idx < items.length - 1 && (
              <Text color={theme.colors.mutedForeground}> {separator} </Text>
            )}
          </Box>
        );
      })}
    </Box>
  );
};
```

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";
```

```tsx
<Breadcrumb
  items={[
    { key: "home", label: "Home", onSelect: () => {} },
    { key: "docs", label: "Docs" },
  ]}
  activeKey="docs"
/>
```

## API Reference

### Breadcrumb

| Prop        | Type               | Default    |
| ----------- | ------------------ | ---------- |
| `items`     | `BreadcrumbItem[]` | `required` |
| `separator` | `string`           | `"›"`      |
| `activeKey` | `string`           | -          |

### BreadcrumbItem

| Prop       | Type         | Default    |
| ---------- | ------------ | ---------- |
| `label`    | `string`     | `required` |
| `key`      | `string`     | `required` |
| `onSelect` | `() => void` | -          |