Anatomy

<Breadcrumbs.Root>
  <Breadcrumbs.List>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link />
    </Breadcrumbs.Item>
    <Breadcrumbs.Separator />
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Usage

import { Breadcrumbs } from '@ivaldi/ui'

<Breadcrumbs.Root>
  <Breadcrumbs.List>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
    </Breadcrumbs.Item>
    <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="/products">Products</Breadcrumbs.Link>
    </Breadcrumbs.Item>
    <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
    <Breadcrumbs.Item>
      <Breadcrumbs.Page>Electronics</Breadcrumbs.Page>
    </Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Breadcrumbs.Composed Props

Composed breadcrumb component that handles complex breadcrumb trails. Features automatic truncation and overflow handling for long paths.

Breadcrumbs.Root Props

Root container component for breadcrumb navigation. Renders a semantic nav element with ARIA breadcrumb role.

Breadcrumbs.Ellipsis Props

Ellipsis indicator for collapsed breadcrumb items. Used when breadcrumb trail is truncated.

Breadcrumbs.Item Props

Individual breadcrumb item container. Handles layout and styling for each breadcrumb segment.

Breadcrumbs.Link Props

Interactive link component for clickable breadcrumb segments. Extends the base Link component with breadcrumb-specific styling.

Breadcrumbs.List Props

Container for breadcrumb items rendered as an ordered list. Provides consistent spacing and text styling for breadcrumb items.

Breadcrumbs.Overflow Props

Overflow menu component for collapsed breadcrumb items. Displays hidden breadcrumbs in a popover when clicked.

Breadcrumbs.Page Props

Current page indicator in the breadcrumb trail. Renders as a non-interactive span with distinct styling.

Breadcrumbs.Separator Props

Visual separator between breadcrumb items. Defaults to a chevron icon but can be customized via children.