Dottiv1.1
← Components

Breadcrumbs

Component

Navigation component showing the current page location within a hierarchy.

Installation & Usage

Basic Usage
import { Breadcrumbs } from 'dotti'

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Current Page' }
  ]}
/>

Examples

Basic Breadcrumbs

Simple breadcrumb navigation with clickable links.

Code
<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/components' },
    { label: 'Breadcrumbs' }
  ]}
/>

Custom Separator

Breadcrumbs with custom separator character.

Code
<Breadcrumbs
  items={breadcrumbItems}
  separator=">"
/>

<Breadcrumbs
  items={breadcrumbItems}
  separator="•"
/>

Max Items Display

Control how many breadcrumb items to show with collapse behavior.

Showing max 4 items with collapse:
Code
<Breadcrumbs
  items={longBreadcrumbList}
  maxItems={4}
/>

Interactive Breadcrumbs

Breadcrumbs with click handlers and different states.

Navigate through the path:
Click on any breadcrumb item to see the navigation handler
Code
<Breadcrumbs
  items={[
    { 
      label: 'Documentation', 
      href: '/docs',
      onClick: (e) => {
        e.preventDefault()
        navigate('/docs')
      }
    },
    { 
      label: 'Components', 
      href: '/docs/components',
      onClick: (e) => {
        e.preventDefault() 
        navigate('/docs/components')
      }
    },
    { label: 'Current Page' }
  ]}
/>

Props