Breadcrumbs

Breadcrumbs renders a semantic <nav> with an ordered list of links, ending in the current page. Supports slash and arrow separators, overflow truncation, and polymorphic items via asChild.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { BreadcrumbItem, Breadcrumbs } from '@infinitibit_gmbh/ui';

export function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="/home">Home</BreadcrumbItem>
      <BreadcrumbItem href="/components">Components</BreadcrumbItem>
      <BreadcrumbItem active>Breadcrumbs</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Separators

Use separator="slash" (default) or separator="arrow". A custom React.ReactElement is also accepted for a fully custom separator.

Overflow truncation

When maxItems is set and the item count exceeds it, the breadcrumb shows the first item, an ellipsis (…), and the last maxItems - 1 items.

Active item

Pass active to BreadcrumbItem for the current page. The active item renders as a <span> (not a link) with aria-current="page".

Polymorphic items with asChild

Use asChild to replace the default <a> with a router link component.

import { Link } from 'react-router-dom';

<BreadcrumbItem asChild>
  <Link to="/home">Home</Link>
</BreadcrumbItem>

API

Breadcrumbs

Prop	Type	Default	Description
children	ReactNode	—	BreadcrumbItem elements (required)
separator	'slash' | 'arrow' | React.ReactElement	'slash'	Separator between items
maxItems	number	—	Max visible items before ellipsis truncation
className	string	—	Extra class on the <nav> element

All other <nav> props are forwarded.

BreadcrumbItem

Prop	Type	Default	Description
active	boolean	false	Marks the current page (renders <span>)
asChild	boolean	false	Merges props onto the child element (Radix Slot)
className	string	—	Extra class on the item element

All other <a> props (e.g. href) are forwarded when active and asChild are both false.

Accessibility

• The <nav> has aria-label="Breadcrumb" so screen readers announce the landmark.
• The active item has aria-current="page" and is rendered as a non-interactive <span>.
• Separator elements are aria-hidden="true" to avoid reading them aloud.
• Ellipsis spans are also aria-hidden="true".