For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/breadcrumb.md.
Leaf UI
  • English

      • Breadcrumb

      Show the current page within a navigation hierarchy.

      Basic usage

      basic.tsx
      import type { BreadcrumbItem } from '@ifhover/leaf-ui';

import { Breadcrumb, Space } from '@ifhover/leaf-ui';

import { House } from 'lucide-react';

const items: readonly BreadcrumbItem[] = [
  { title: 'Home', href: '#basic-usage', icon: <House size={14} /> },
  { title: 'Projects', href: '#basic-usage' },
  { title: 'Leaf Garden' },
];

export function BreadcrumbBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Breadcrumb items={items} />
      <Breadcrumb items={items} separator="/" />
    </Space>
  );
}

      Collapse long paths

      capabilities.tsx
      import { Breadcrumb } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Breadcrumb
      aria-label={'Collapsed project path'}
      maxItems={3}
      items={[
        { title: 'Home', href: '#home' },
        { title: 'Workspace', href: '#workspace' },
        { title: 'Projects', href: '#projects' },
        { title: 'Leaf UI', href: '#leaf' },
        { title: 'Tokens' },
      ]}
    />
  );
}
      PropertyTypeDefaultDescription
      itemsreadonly BreadcrumbItem[]RequiredRequired. Path items
      separatorReactNodeChevronRightSeparator
      maxItemsnumber—Maximum items before collapsing a path.
      itemsBeforeCollapsenumber1Leading items retained after collapse.
      itemsAfterCollapsenumber1Trailing items retained after collapse.
      itemRender(item: BreadcrumbItem, index: number) => ReactNode—Customize item content.
      aria-labelstringLocale defaultNavigation label
      PropertyTypeDefaultDescription
      keystring—Stable identifier
      titleReactNodeRequiredRequired. Page title
      iconReactNode—Leading icon
      menureadonly DropdownItem[]—Dropdown items for a breadcrumb.
      hrefstring—Link destination.
      targetstring—Target selector or element getter; omit to center the step.

      Types

      Import the component props and item types when preparing your own values.

      import type { BreadcrumbProps, BreadcrumbItem } from '@ifhover/leaf-ui';

      Usage notes

      The final item is marked as the current page. BreadcrumbItem accepts native anchor attributes. A router Link can be passed as title; omitting href avoids an additional anchor.