---
title: Breadcrumb
description: A navigation component that displays the current page's location within a hierarchical structure, helping users understand where they are in the application
---

```tsx
'use client';

import { Breadcrumb } from '@/ui/Breadcrumb';

export function BreadcrumbDemo() {
  return (
    <Breadcrumb
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Category', href: '/products/category' },
        { label: 'Current Page', href: '/products/category/item' },
      ]}
      theme="light"
    />
  );
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/breadcrumb.json
```

Or manually, copy the following code into `/ui/breadcrumb.tsx`:

```tsx
import clsx from 'clsx';
import type { ComponentPropsWithoutRef, FunctionComponent } from 'react';

import type { Theme } from './types/Theme';
import { Icon } from '@clubmed/trident-icons';
import { getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';

export interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
  items: Array<{
    href: string;
    label: string;
  }>;
  theme?: Theme;
}

export const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({
  className,
  items,
  theme = 'light',
  ...attrs
}) => {
  if (items.length == 0) {
    return null;
  }

  const themeColor = getThemeColor(theme);
  const accentColor = getComplementaryTextColor(themeColor);
  const color = accentColor === 'text-white' ? accentColor : 'text-middleGrey';

  const [first, second, , ...rest] = items;
  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];
  const spacer = { label: '…', href: '' };
  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];

  return (
    <nav aria-label="Breadcrumb" {...attrs} className={clsx(className, 'overflow-hidden')}>
      <ul className="scrollbar-hidden text-b4 flex items-center overflow-x-auto font-sans">
        {itemsToRender.map(({ label, href }, index) => {
          const isLast = index === itemsToRender.length - 1;
          const isLink = href && !isLast;

          return (
            <li
              {...(isLast && { 'aria-current': 'page' })}
              className={clsx(
                'flex shrink-0 items-center',
                { [color]: !isLast },
                {
                  'font-bold': isLast,
                  [accentColor]: isLast,
                },
              )}
              key={label}
            >
              {isLink ? (
                <a
                  href={href}
                  className="rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2"
                >
                  {label}
                </a>
              ) : (
                label
              )}
              {!isLast && <Icon className="mx-4" name="Diamond" width="14px" />}
            </li>
          );
        })}
      </ul>
    </nav>
  );
};
```

## Usage

```tsx showLineNumbers
import Breadcrumb from '@/docs/lib/ui/breadcrumb';

export function Component() {
  return (
    <Breadcrumb
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Category', href: '/products/category' },
        { label: 'Current Page', href: '/products/category/item' },
      ]}
      theme="light"
    />
  );
}
```

## API Reference

### Breadcrumb

| Prop    | Type                                                                   | Default   | Description                                                                                                                                            |
| ------- | ---------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `items` | `({ href: string; label: string } & ComponentPropsWithoutRef<"li">)[]` | Required  | Array of breadcrumb items. Each item contains a label (displayed text) and href (link URL). The last item is automatically styled as the current page. |
| `theme` | `"light" \| "dark"`                                                    | `"light"` | Visual theme of the breadcrumb. Controls the color scheme of the links and separators.                                                                 |

## Notes

- If more than 3 items are provided, the breadcrumb will automatically collapse the middle items, showing only the first two items, a spacer, and the last item
- The last item in the breadcrumb is automatically marked with `aria-current="page"` for accessibility
- Items are separated by a diamond icon
- The component returns `null` if an empty items array is provided