Breadcrumb | Component Docs

Displays a breadcrumb navigation with responsive behavior (truncated on mobile, full on desktop).

Props

Prop	Type	Required	Default	Description
`items`	`BreadcrumbItem[]`	Yes	-	Array of breadcrumb items
`className`	`string`	No	-	Additional CSS classes

BreadcrumbItem Interface

1interface BreadcrumbItem {
2  label: string;
3  href?: string;
4}

interface BreadcrumbItem {
  label: string;
  href?: string;
}

Usage

1import Breadcrumb from '@/components/molecules/Breadcrumb';
2
3<Breadcrumb 
4  items={[
5    { label: "Home", href: "/" },
6    { label: "Blog", href: "/blog" },
7    { label: "Current Post" }
8  ]}
9/>

import Breadcrumb from '@/components/molecules/Breadcrumb';

<Breadcrumb 
  items={[
    { label: "Home", href: "/" },
    { label: "Blog", href: "/blog" },
    { label: "Current Post" }
  ]}
/>

Features

Responsive: Shows full breadcrumb on desktop, truncated (last 2 items) on mobile
Schema.org markup: Includes proper microdata for SEO
Accessible: Uses semantic HTML with ARIA labels
Mobile optimization: Shows ellipsis (...) for truncated items on mobile
Last item: Current page is not clickable (no href)

Behavior

Desktop: Shows all breadcrumb items
Mobile: Shows ellipsis + last 2 items if more than 2 items exist
Last item is always non-clickable and styled differently
Items are separated by ">" character

Notes

Client-side component (uses 'use client')
Uses useMemo for performance optimization
Includes schema.org BreadcrumbList markup for SEO