Skip to main content

Breadcrumb

Show a resource hierarchy and mark its current page.

View as MarkdownSource Code

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

Basic usage#

import { Breadcrumb } from 'moraine'

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

Playground#

Props
Slots

Anatomy#

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".

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#

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#

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
data-disabledSlot: breadcrumb-linkDescription: Present when the component, slot, or item is disabled.
data-currentSlot: breadcrumb-pageDescription: Present when the item represents the current location or step.

Props#

Props for the Breadcrumb component. Renders a <nav> element by default.

Prop