navigationbreadcrumb

Breadcrumb

Breadcrumb navigation trail with separator icons and optional wrapping.

Import#

import { Breadcrumb } from 'moraine'

Slot Structure#

Ordered navigation list with links and separators between items.

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

Examples#

Default#

Simple breadcrumb trail with active last item.

1
function Default() {
2
  const DEFAULT_ITEMS = [
3
    { label: 'Home', href: '#', icon: 'i-lucide:house' },
4
    { label: 'Library', href: '#', icon: 'i-lucide:folder' },
5
    { label: 'Components', href: '#', icon: 'i-lucide:box' },
6
    { label: 'Breadcrumb', href: '#', icon: 'i-lucide:bell-ring', active: true },
7
  ]
8

9
  return <Breadcrumb items={DEFAULT_ITEMS} />
10
}

Sizes#

Different size.

1
function Sizes() {
2
  return (
3
    <div class="flex flex-col gap-4">
4
      <Breadcrumb
5
        size="sm"
6
        items={[
7
          { label: 'Workspace', href: '#', icon: 'i-lucide:briefcase' },
8
          { label: 'Settings', href: '#', icon: 'i-lucide:settings' },
9
          { label: 'Danger Zone', href: '#', disabled: true, icon: 'i-lucide:triangle-alert' },
10
        ]}
11
      />
12
      <Breadcrumb
13
        size="lg"
14
        items={[
15
          { label: 'Workspace', href: '#', icon: 'i-lucide:briefcase' },
16
          { label: 'Settings', href: '#', icon: 'i-lucide:settings' },
17
          { label: 'Danger Zone', href: '#', disabled: true, icon: 'i-lucide:triangle-alert' },
18
        ]}
19
      />
20
    </div>
21
  )
22
}

Custom Separator + Disabled#

Use an alternative separator and mark links as disabled.

1
function CustomSeparatorDisabled() {
2
  return (
3
    <Breadcrumb
4
      separator={() => '/'}
5
      classes={{
6
        separator: 'size-unset',
7
      }}
8
      items={[
9
        { label: 'Workspace', href: '#', icon: 'i-lucide:briefcase' },
10
        { label: 'Settings', href: '#', icon: 'i-lucide:settings' },
11
        { label: 'Danger Zone', href: '#', disabled: true, icon: 'i-lucide:triangle-alert' },
12
      ]}
13
    />
14
  )
15
}

Wrapping#

Toggle wrapping behavior for long breadcrumb labels.

1
function Wrapping() {
2
  const [wrap, setWrap] = createSignal(true)
3

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

10
      <div class="max-w-md">
11
        <Breadcrumb
12
          wrap={wrap()}
13
          items={[
14
            { label: 'Very long section name that can wrap', href: '#' },
15
            { label: 'Another long nested section title', href: '#' },
16
            { label: 'Current page with long title', href: '#', active: true },
17
          ]}
18
        />
19
      </div>
20
    </div>
21
  )
22
}

API Reference#

Attributes#

Slotroot5 attributes

Navigation container for the breadcrumb trail.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.
data-size	Stores the resolved size variant.
data-variant	Stores the resolved visual variant.

ARIA Attributes

ARIA Attribute	Description
aria-label	Provides an accessible label when visible text is not sufficient.
role	Defines the semantic role exposed to 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.