---
title: Breadcrumb
description: Breadcrumb navigation trail with separator icons and optional wrapping.
sidebar:
  order: 1
search:
  tags: [path, hierarchy, navigation, trail]
---

# Breadcrumb

> Breadcrumb navigation trail with separator icons and optional wrapping.

## Import

```tsx
import { Breadcrumb } from 'moraine'
```

## Slot Structure

Ordered navigation list with links and separators between items.

```text
root
└── list
    └── item (×n)
        ├── link
        └── separator (optional, between items)
```

## Examples

### Default

Simple breadcrumb trail with active last item.

```tsx
function Default() {
  const DEFAULT_ITEMS = [
    { label: 'Home', href: '#', icon: 'i-lucide:house' },
    { label: 'Library', href: '#', icon: 'i-lucide:folder' },
    { label: 'Components', href: '#', icon: 'i-lucide:box' },
    { label: 'Breadcrumb', href: '#', icon: 'i-lucide:bell-ring', active: true },
  ]

  return <Breadcrumb items={DEFAULT_ITEMS} />
}
```

### Sizes

Different size.

```tsx
function Sizes() {
  return (
    <div class="flex flex-col gap-4">
      <Breadcrumb
        size="sm"
        items={[
          { label: 'Workspace', href: '#', icon: 'i-lucide:briefcase' },
          { label: 'Settings', href: '#', icon: 'i-lucide:settings' },
          { label: 'Danger Zone', href: '#', disabled: true, icon: 'i-lucide:triangle-alert' },
        ]}
      />
      <Breadcrumb
        size="lg"
        items={[
          { label: 'Workspace', href: '#', icon: 'i-lucide:briefcase' },
          { label: 'Settings', href: '#', icon: 'i-lucide:settings' },
          { label: 'Danger Zone', href: '#', disabled: true, icon: 'i-lucide:triangle-alert' },
        ]}
      />
    </div>
  )
}
```

### Custom Separator + Disabled

Use an alternative separator and mark links as disabled.

```tsx
function CustomSeparatorDisabled() {
  return (
    <Breadcrumb
      separator={() => '/'}
      classes={{
        separator: 'size-unset',
      }}
      items={[
        { label: 'Workspace', href: '#', icon: 'i-lucide:briefcase' },
        { label: 'Settings', href: '#', icon: 'i-lucide:settings' },
        { label: 'Danger Zone', href: '#', disabled: true, icon: 'i-lucide:triangle-alert' },
      ]}
    />
  )
}
```

### Wrapping

Toggle wrapping behavior for long breadcrumb labels.

```tsx
function Wrapping() {
  const [wrap, setWrap] = createSignal(true)

  return (
    <div class="space-y-3">
      <Button onClick={() => setWrap((value) => !value)}>
        Wrap: {wrap() ? 'enabled' : 'disabled'}
      </Button>

      <div class="max-w-md">
        <Breadcrumb
          wrap={wrap()}
          items={[
            { label: 'Very long section name that can wrap', href: '#' },
            { label: 'Another long nested section title', href: '#' },
            { label: 'Current page with long title', href: '#', active: true },
          ]}
        />
      </div>
    </div>
  )
}
```

## API Reference

### Attributes

#### `root`

Navigation container for the breadcrumb trail.

##### Data Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| data-orientation | string \| undefined | Stores the rendered orientation. |
| data-size | string | Stores the resolved size variant. |
| data-variant | string | Stores the resolved visual variant. |

##### ARIA Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| aria-label | boolean \| string \| undefined | Provides an accessible label when visible text is not sufficient. |
| role | string | Defines the semantic role exposed to assistive technology. |

#### `list`

Ordered list that contains breadcrumb items and separators.

#### `item`

Wrapper for one breadcrumb entry.

#### `link`

Clickable breadcrumb target for navigable entries.

##### Data Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| data-current | string \| undefined | Present when the item represents the current location. |

##### ARIA Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| aria-current | string | Marks the current item in a set or navigation trail. |
| role | string | Defines the semantic role exposed to assistive technology. |

#### `leading`

Optional icon rendered before a breadcrumb label.

##### ARIA Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| aria-hidden | boolean \| string \| undefined | Hides decorative content from assistive technology. |

#### `label`

Breadcrumb item label text.

#### `separator`

Visual divider between breadcrumb entries.

##### Data Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| data-orientation | string \| undefined | Stores the rendered orientation. |

##### ARIA Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| aria-hidden | boolean \| string \| undefined | Hides decorative content from assistive technology. |

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| class | ClassValue | — | Class applied to the component root or trigger element. |
| classes | BreadcrumbT.Classes \| undefined | — | — |
| itemRender | ComponentOrElement<BreadcrumbT.ItemRenderProps> \| undefined | — | Custom renderer for individual breadcrumb items. |
| items | BreadcrumbT.Item[] \| undefined | — | Array of breadcrumb items to display. |
| ref | JSX.HTMLElementTags["nav"] extends { ref?: infer Ref; } ? Ref : never \| undefined | — | — |
| separator | IconT.Name | icon-chevron-right | Icon name for the separator between items. |
| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined | md | Size of the breadcrumb items and icons. |
| style | JSX.CSSProperties \| undefined | — | — |
| styles | BreadcrumbT.Styles \| undefined | — | — |
| wrap | boolean \| undefined | — | — |

### Items

An individual item in the breadcrumb trail.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| active | boolean \| undefined | — | Whether the item is the current active page. |
| disabled | boolean \| undefined | — | Whether the item is disabled. |
| href | string \| undefined | — | The destination URL for this item. |
| icon | IconT.Name | — | Icon to display next to the label. |
| label | JSX.Element | — | Label to display for the breadcrumb item. |
| onClick | JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent> \| undefined | — | Callback when the item is clicked. |
| rel | string \| undefined | — | Relationship of the linked URL to the current document. |
| target | string \| undefined | — | Where to display the linked URL. |
| to | string \| undefined | — | The destination URL for this item. |

### ARIA

Accessibility attributes and roles emitted by the component markup.

| Attribute | Type | Description |
| --- | --- | --- |
| aria-busy | boolean \| string \| undefined | Accessibility attribute forwarded by the rendered component. |
| aria-current | string | Marks the current item in a set or navigation trail. |
| aria-disabled | boolean \| string \| undefined | Indicates that the control is disabled. |
| aria-hidden | boolean \| string \| undefined | Hides decorative content from assistive technology. |
| aria-label | boolean \| string \| undefined | Provides an accessible label when visible text is not sufficient. |
| role | string | Defines the semantic role exposed to assistive technology. |

### Data Attributes

State and slot attributes exposed for styling hooks and selectors.

| Attribute | Type | Description |
| --- | --- | --- |
| data-current | string \| undefined | Present when the item represents the current location. |
| data-disabled | string \| undefined | Present when the component or item is disabled. |
| data-loading | string \| undefined | Present when the component is loading. |
| data-orientation | string \| undefined | Stores the rendered orientation. |
| data-size | string | Stores the resolved size variant. |
| data-slot | string | Identifies the rendered slot for styling hooks and selectors. |
| data-variant | string | Stores the resolved visual variant. |