Skip to documentation

Breadcrumb

A trail of links to the current page, with a chevron separator and router-aware links.

import { Breadcrumb } from '@lobehub/ui/base-ui';
NPMSourceEdit
Navigation

Basic

Loading preview

APIs

Breadcrumb properties
classNames
{ item?: string; separator?: string; }
itemsRequired
BreadcrumbItem[]
ref
null | (instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLElement | null>

Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

separator
null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
styles
{ item?: CSSProperties; separator?: CSSProperties; }

Also accepts all native HTML and ARIA attributes.

Renders nav[aria-label="breadcrumb"] > ol > li. The last item gets aria-current="page"; separators are aria-hidden. Items with href render through lobe-ui A, so a router Link set as ConfigProvider aAs navigates client-side. Items with only onClick render as buttons.

Migrating from antd Breadcrumb

  • The default separator is a chevron icon; drop explicit separator={<Icon icon={ChevronRight} />}.
  • Items are vertically centered by default; delete .ant-breadcrumb-* overrides.
  • Dropdown menu items, itemRender, params and route-path concatenation are not supported.