Fluxo UIFluxo UIv0.4.1

Breadcrumb

A navigation breadcrumb component with collapsible items, custom separators, and accessible markup.

Basic Usage

Standard Breadcrumb

A simple breadcrumb trail with the last item as the current page.

import { Breadcrumb } from 'fluxo-ui';
import type { BreadcrumbItem } from 'fluxo-ui';

const items: BreadcrumbItem[] = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Electronics', href: '/products/electronics' },
  { label: 'Laptops' },
];

<Breadcrumb
  items={items}
  onItemClick={(item, index) => console.log(item.label, index)}
/>

Collapsed Items

Set maxItems to collapse middle items into an ellipsis that expands into a dropdown on click.

Collapsed Items

When maxItems is set, middle items collapse into an ellipsis dropdown. Click the ellipsis to expand.

import { Breadcrumb } from 'fluxo-ui';

const items = [
  { label: 'Home', href: '/' },
  { label: 'Region', href: '/region' },
  { label: 'Country', href: '/country' },
  { label: 'State', href: '/state' },
  { label: 'City', href: '/city' },
  { label: 'District', href: '/district' },
  { label: 'Street' },
];

<Breadcrumb items={items} maxItems={3} />

Custom Separator

Use the separator prop to customize the divider between breadcrumb items.

Custom Separators

Use any ReactNode as a separator between breadcrumb items.

Arrow icon separator
Greater-than separator
Pipe separator
import { Breadcrumb } from 'fluxo-ui';

const arrowSeparator = (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
  </svg>
);

<Breadcrumb items={items} separator={arrowSeparator} />

<Breadcrumb items={items} separator=">" />

<Breadcrumb items={items} separator="|" />

Import

import { Breadcrumb } from 'fluxo-ui';
import type { BreadcrumbItem, BreadcrumbProps } from 'fluxo-ui';

Breadcrumb Props

itemsreq
BreadcrumbItem[]

Array of breadcrumb items to display.

separator
ReactNode"'/'"

Custom separator between items.

maxItems
number

Maximum visible items before collapsing middle items into ellipsis. When omitted, the breadcrumb auto-collapses based on container width unless autoCollapse is explicitly false.

autoCollapse
boolean"true"

Auto-collapse middle items when the breadcrumb overflows its container. Ignored when maxItems is provided.

className
string

Additional CSS class for the nav container.

onItemClick
(item: BreadcrumbItem, index: number) => void

Called when any breadcrumb item is clicked.

BreadcrumbItem Interface

labelreq
string

Display text for the breadcrumb.

href
string

URL for the breadcrumb link.

icon
ReactNode

Icon displayed before the label.

onClick
() => void

Click handler for the item.

Features

Auto Collapse

Long breadcrumb trails collapse middle items into an expandable ellipsis menu.

Custom Separators

Use any ReactNode as a separator: text, icons, or custom elements.

Link & Button Modes

Items render as anchor tags (with href) or buttons (with onClick).

Active Page

The last item is automatically styled as the current page with aria-current.

Icon Support

Each item can display an icon alongside its label.

Accessibility

Semantic nav/ol markup with aria-label and aria-current attributes.