Breadcrumb

The ancestor trail from the dashboard header. Interactive items darken on hover with a soft background pill; the current page is non-interactive. Items accept leading icons or avatars.

Installation

You can add this breadcrumb component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add breadcrumb

Using a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.

With avatars

Items accept arbitrary leading content - pass an xs Avatar for team/user trails, or an icon component reference for glyphs.

{/* Items take arbitrary leading content - avatars, icons, dots */}<Breadcrumb aria-label="Team">  <BreadcrumbItem href="#">    <Avatar size="xs" color="blue" initials="B" />    Board team  </BreadcrumbItem>  <BreadcrumbItem current icon={RiHomeLine}>Home</BreadcrumbItem></Breadcrumb>