Photonix

Breadcrumb

Indicates the current page's location within a hierarchy.

Preview

Usage
"use client";

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

const items = [
    { label: 'Home', href: '/', value: 'home' },
    { label: 'Projects', href: '/projects', value: 'projects' },
    { label: 'Photonix', href: '/projects/photonix', value: 'photonix' },
    { label: 'Components', href: '/projects/photonix/components', value: 'components' },
    { label: 'Breadcrumb', value: 'breadcrumb' },
];

export default function BreadcrumbBasicExample() {
    return <ResponsiveBreadcrumb items={items} maxItems={4} />;
}

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
-

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System