Leaf UI
  • English

      • Breadcrumb

      Show the current page within a navigation hierarchy.

      Basic usage

      Live previewBasic usage
      basic.tsx
      import { Breadcrumb, type BreadcrumbItem } from '@sudden3/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 (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Breadcrumb items={items} />
      <Breadcrumb items={items} separator="/" />
    </div>
  );
}
      PropTypeDefaultDescription
      itemsreadonly BreadcrumbItem[]RequiredPath items
      separatorReactNodeChevronRightSeparator
      aria-labelstringLocale defaultNavigation label
      PropTypeDefaultDescription
      keystring—Stable identifier
      titleReactNodeRequiredPage title
      iconReactNode—Leading icon
      hrefstring—Link destination; omit for plain text
      targetstring—Link target
      onClickMouseEventHandler<HTMLAnchorElement>—Link click handler

      Types

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

      import type { BreadcrumbProps, BreadcrumbItem } from '@sudden3/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.