Breadcrumb

A navigation breadcrumb component for showing page hierarchy.

Import

import { Breadcrumb } from '@/components/ui';

Basic Usage

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Projects', href: '/projects' },
    { label: 'My Project' },
  ]}
/>

Props

Prop Type Default Description
items Array<{ label: string, href?: string }> required Breadcrumb items
separator ReactNode Chevron Custom separator

Item Structure

interface BreadcrumbItem {
  label: string;   // Display text
  href?: string;   // Link URL (last item typically has no href)
}

Examples

Simple Navigation

<Breadcrumb
  items={[
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'Settings' },
  ]}
/>

Deep Hierarchy

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Admin', href: '/admin' },
    { label: 'Users', href: '/admin/users' },
    { label: 'John Doe', href: '/admin/users/123' },
    { label: 'Edit' },
  ]}
/>

Custom Separator

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Laptop' },
  ]}
  separator={<span className="mx-2">/</span>}
/>

Page Layout Example

export function ProjectPage({ project }) {
  return (
    <div className="space-y-6">
      <Breadcrumb
        items={[
          { label: 'Dashboard', href: '/dashboard' },
          { label: 'Projects', href: '/projects' },
          { label: project.name },
        ]}
      />

      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">{project.name}</h1>
        <Button color="blue">Edit Project</Button>
      </div>

      {/* Page content */}
    </div>
  );
}

Admin Panel Example

export function UserEditPage({ user }) {
  return (
    <div className="space-y-6">
      <Breadcrumb
        items={[
          { label: 'Back Office', href: '/admin' },
          { label: 'Users', href: '/admin/users' },
          { label: user.name, href: `/admin/users/${user.id}` },
          { label: 'Edit' },
        ]}
      />

      <Card>
        <CardHeader>
          <CardTitle>Edit User</CardTitle>
        </CardHeader>
        <CardContent>
          {/* Edit form */}
        </CardContent>
      </Card>
    </div>
  );
}

Dynamic Breadcrumbs

'use client';
import { usePathname } from 'next/navigation';
import { Breadcrumb } from '@/components/ui';

export function DynamicBreadcrumb() {
  const pathname = usePathname();
  const segments = pathname.split('/').filter(Boolean);

  const items = segments.map((segment, index) => ({
    label: segment.charAt(0).toUpperCase() + segment.slice(1),
    href: index < segments.length - 1
      ? '/' + segments.slice(0, index + 1).join('/')
      : undefined,
  }));

  return <Breadcrumb items={[{ label: 'Home', href: '/' }, ...items]} />;
}

Styling