# Breadcrumbs · HeroUI

> Navigation breadcrumbs showing the current page's location within a hierarchy

- Page: https://jiguang132.com/systems/heroui/docs/components/breadcrumbs
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

```tsx
import { Breadcrumbs } from '@heroui/react';
```

### Usage


> Example `breadcrumbs-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/breadcrumbs


### Anatomy

Import the Breadcrumbs component and access all parts using dot notation.

```tsx
import { Breadcrumbs } from '@heroui/react';

export default () => (
  <Breadcrumbs>
    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
    <Breadcrumbs.Item>Current Page</Breadcrumbs.Item>
  </Breadcrumbs>
)
```

### Navigation Levels


> Example `breadcrumbs-level-2`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/breadcrumbs


> Example `breadcrumbs-level-3`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/breadcrumbs


### Custom Separator


> Example `breadcrumbs-custom-separator`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/breadcrumbs


### Disabled State


> Example `breadcrumbs-disabled`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/breadcrumbs


### Custom Render Function


> Example `breadcrumbs-custom-render-function`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/breadcrumbs


## Styling

### Passing Tailwind CSS classes

```tsx
import { Breadcrumbs } from '@heroui/react';

function CustomBreadcrumbs() {
  return (
    <Breadcrumbs className="gap-2">
      <Breadcrumbs.Item href="#" className="text-blue-600">
        Home
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>Current</Breadcrumbs.Item>
    </Breadcrumbs>
  );
}
```

### Customizing the component classes

To customize the Breadcrumbs component classes, you can use the `@layer components` directive.
  
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@layer components {
  .breadcrumbs {
    @apply gap-4 text-lg;
  }

  .breadcrumbs__link {
    @apply font-semibold;
  }

  .breadcrumbs__separator {
    @apply text-blue-500;
  }
}
```

HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.

### CSS Classes

The Breadcrumbs component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/breadcrumbs.css)):

#### Base Classes
- `.breadcrumbs` - Base breadcrumbs container
- `.breadcrumbs__item` - Individual breadcrumb item wrapper
- `.breadcrumbs__link` - Breadcrumb link element
- `.breadcrumbs__separator` - Separator icon between items

#### State Classes
- `.breadcrumbs__link[data-current="true"]` - Current page indicator (not a link)

### Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

- **Current**: `[data-current="true"]` on link (indicates current page)
- **Hover**: Link elements support standard hover states
- **Disabled**: `isDisabled` prop disables all links

## API Reference

### Breadcrumbs Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `separator` | `ReactNode` | chevron-right icon | Custom separator between breadcrumb items |
| `isDisabled` | `boolean` | `false` | Whether all breadcrumb links are disabled |
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | The breadcrumb items |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>` | - | Overrides the default DOM element with a custom render function|

### Breadcrumbs.Item Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `href` | `string` | - | The URL to link to (omit for current page) |
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode \| RenderFunction` | - | Item content or render function |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, BreadcrumbRenderProps>` | - | Overrides the default DOM element with a custom render function|

## Accessibility

Breadcrumbs uses React Aria Components' Breadcrumbs primitive, which provides:

- Proper ARIA attributes for navigation landmarks
- Current page indication via `aria-current="page"`
- Keyboard navigation support
- Screen reader announcements for navigation context

The last breadcrumb item (without `href`) automatically becomes the current page indicator.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt