Tuimorphic

BreadCrumbs

Hierarchical navigation paths with linked text segments and chevron separators.

Import

import { BreadCrumbs } from 'tuimorphic';

Basic Usage

<BreadCrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Widget' }
  ]}
/>

Props

PropTypeDefaultDescription
itemsBreadCrumbItem[]-Array of breadcrumb items to display (required)
separatorReact.ReactNode'>'Separator element between breadcrumb items
classNamestring-Additional CSS class names
PropTypeDefaultDescription
labelstring-Display label for the breadcrumb (required)
hrefstring-URL to navigate to when clicked
onClick() => void-Click handler for custom navigation logic

Variants

Basic Navigation

<BreadCrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Widget' }
  ]}
/>

With Custom Separator

<BreadCrumbs
  items={[
    { label: 'Root', href: '/' },
    { label: 'Section', href: '/section' },
    { label: 'Current' }
  ]}
  separator="/"
/>

With Click Handlers

<BreadCrumbs
  items={[
    { label: 'Home', onClick: () => navigate('/') },
    { label: 'Products', onClick: () => navigate('/products') },
    { label: 'Current Page' }
  ]}
/>

Mixed Navigation

<BreadCrumbs
  items={[
    { label: 'Home', href: '/', onClick: trackNavigation },
    { label: 'Category', href: '/category' },
    { label: 'Details' }
  ]}
/>

Previous

Menu

Next

Dialog

On this page