Breadcrumbs

​

Overview

​

Import

import { Breadcrumbs } from '@kivora/react';

​

Basic Usage

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

​

With Click Handlers

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

​

Custom Separator

<Breadcrumbs 
  separator="›"
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Sneakers' },
  ]} 
/>

<Breadcrumbs 
  separator={<ChevronRight className="size-4" />}
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Sneakers' },
  ]} 
/>

​

Props

​

BreadcrumbsProps

​

BreadcrumbsItem

​

Behavior

• The last item is automatically marked as the current page
• Items without href or onClick are rendered as plain text
• The last item is always non-interactive
• Separators are hidden from screen readers with aria-hidden

​

Accessibility

• Wrapped in a <nav> element with aria-label="Breadcrumb"
• Uses semantic <ol> list structure
• Last item has aria-current="page" attribute
• Separators are decorative and hidden from screen readers
• Links have proper focus styles with visible ring

​

Styling

• Current page (last item) is displayed in foreground color with medium font weight
• Interactive links are in muted-foreground with hover transitions
• Separators are in muted-foreground and non-selectable
• Responsive layout with flex wrap for narrow viewports