---
title: Breadcrumb
description: Show a resource hierarchy and mark its current page.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Breadcrumb

> Show a resource hierarchy and mark its current page.

Use Breadcrumb to show a resource’s place in a navigation hierarchy. The current page is represented as a non-link item.

## Basic usage

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

export function Example() {
  return <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Settings' }]} />
}
```

## Anatomy

```text
Breadcrumb [component; slot=root; <nav>]
└── list [slot]
    ├── item [slot]
    │   └── link [slot]
    │       ├── leading [slot]
    │       └── label [slot]
    └── separator [slot]
```

## Usage

### Items and current page

Use links for navigable ancestors. The last item is the current page by default; use `active` to select another item explicitly. The current page is a non-link `span` with `aria-current="page"`. Explicitly disabled ancestors remain non-interactive and expose `aria-disabled="true"`.

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

const BREADCRUMB_ITEMS = [
  { label: 'Home', href: '/' },
  { label: 'Components', href: '/button' },
  { label: 'Breadcrumb' },
]

export function ItemsPage() {
  return (
    <div class="max-w-md w-full">
      <Breadcrumb items={BREADCRUMB_ITEMS} />
    </div>
  )
}
```

## Examples

### Custom separator and disabled item

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

export function CustomSeparatorDisabled() {
  return (
    <Breadcrumb
      separator={() => <span>/</span>}
      classes={{
        separator: 'size-unset',
      }}
      items={[
        { label: 'Home', href: '/', icon: 'i-lucide:home' },
        { label: 'Private workspace', href: '/breadcrumb', disabled: true, icon: 'i-lucide:lock' },
        { label: 'Activity' },
      ]}
    />
  )
}
```

### Wrapping

```tsx
import { Breadcrumb, Switch } from 'moraine'
import { createSignal } from 'solid-js'

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

  return (
    <div class="min-w-0 w-full space-y-4">
      <Switch checked={wrap()} onCheckedChange={setWrap} label="Wrap items" />

      <div
        class="p-4 border border-border rounded-lg"
        classList={{ 'w-full max-w-sm': wrap(), 'w-max': !wrap() }}
      >
        <Breadcrumb
          wrap={wrap()}
          classes={{
            list: wrap() ? undefined : 'overflow-visible',
            item: wrap() ? undefined : 'shrink-0',
          }}
          items={[
            { label: 'Home', href: '#' },
            { label: 'Workspace', href: '#' },
            { label: 'Projects', href: '#' },
            { label: 'Design system', href: '#' },
            { label: 'Components', href: '#' },
            { label: 'Breadcrumb' },
          ]}
        />
      </div>

      <p class="text-sm text-muted-foreground">
        Turn wrapping off to show the full trail on a single line.
      </p>
    </div>
  )
}
```

## Attributes

| Attributes | Slot | Description |
| --- | --- | --- |
| `data-disabled` | `breadcrumb-link` | Present when the component, slot, or item is disabled. |
| `data-current` | `breadcrumb-page` | Present when the item represents the current location or step. |

## Props

Props for the Breadcrumb component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| itemRender | ((props: ItemRenderProps) => JSX.Element) \| undefined | — | Renderer for each breadcrumb item. |
| items | ({<br>  /** Label to display for the breadcrumb item. */<br>  label?: JSX.Element;<br>  /** Icon to display next to the label. */<br>  icon?: IconT.Name;<br>  /** The destination URL for this item. */<br>  to?: string;<br>  /** The destination URL for this item. */<br>  href?: string;<br>  /** Where to display the linked URL. */<br>  target?: string;<br>  /** Relationship of the linked URL to the current document. */<br>  rel?: string;<br>  /** Whether the item is the current active page. */<br>  active?: boolean;<br>  /** Whether the item is disabled. */<br>  disabled?: boolean;<br>  /** Callback when the item is clicked. */<br>  onClick?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;<br>})[] \| undefined | — | Array of breadcrumb items to display. |
| ref | Ref<HTMLElement> \| undefined | — | Ref forwarded to the root `<nav>` element. |
| separator | IconT.Name \| undefined | 'icon-chevron-right' | Icon name for the separator between items. |
| size | 'sm' \| 'md' \| 'lg' \| undefined | 'md' | Visual size of the component. |
| wrap | boolean \| undefined | true | Visual wrap of the component. |
| class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. |
| classes | Classes \| undefined | — | Family slot class defaults for this instance. |
| style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. |
| styles | Styles \| undefined | — | Family slot style defaults for this instance. |