Photonix UI - React Components, Templates & Figma Design System

Breadcrumb

Indicates the current page's location within a hierarchy.

Preview

Usage

import { ResponsiveBreadcrumb } from '@photonix/ultimate';

<ResponsiveBreadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Category', href: '/cat' },
  { label: 'Current Page', href: '/current' }
]} />

Component API

ResponsiveBreadcrumb

Prop	Type	Default	Description
items	`BreadcrumbItemData[]`	`-`	Array of breadcrumb items
maxItems	`number`	`4`	Max items visible before collapsing (default: 4)
itemsBeforeCollapse	`number`	`1`	Number of items to show before the ellipsis (default: 1)
itemsAfterCollapse	`number`	`2`	Number of items to show after the ellipsis (default: 2)
separator	`React.ReactNode`	`-`	Custom separator
onSelectHiddenItem	`((value: string) => void)`	`-`	Callback when a hidden item (in ellipsis) is selected
onItemClick	`((e: React.MouseEvent, item: BreadcrumbItemData) => void)`	`-`	Callback when a visible item link is clicked (e.g. for router navigation)
className	`string`	`-`

Breadcrumb

Preview

Component API

ResponsiveBreadcrumb

On this page