Breadcrumb

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from "@prisma/eclipse";

Usage

Basic Breadcrumb

tsx

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@prisma/eclipse";

export function BasicBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Live Example:

<Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Breadcrumb</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb>

With Custom Separator

You can customize the separator between breadcrumb items:

tsx

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@prisma/eclipse";

export function CustomSeparatorBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>\></BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>\></BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Components</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Live Example:

<Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator>\></BreadcrumbSeparator> <BreadcrumbItem> <BreadcrumbLink href="/docs">Docs</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator>\></BreadcrumbSeparator> <BreadcrumbItem> <BreadcrumbPage>Components</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb>

With Ellipsis for Long Paths

For long navigation paths, you can collapse intermediate items:

tsx

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@prisma/eclipse";

export function EllipsisBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Live Example:

<Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbEllipsis /> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Breadcrumb</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb>

Using Next.js Link

You can use the breadcrumb with Next.js Link component using the asChild prop:

tsx

import Link from "next/link";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@prisma/eclipse";

export function NextLinkBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/docs">Documentation</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API Reference

The root container for the breadcrumb navigation.

Props:

Extends all standard HTML <nav> attributes
separator - Custom separator element (optional)

BreadcrumbList

The ordered list container for breadcrumb items.

Props:

Extends all standard HTML <ol> attributes
className - Additional CSS classes (optional)

BreadcrumbItem

Individual breadcrumb item wrapper.

Props:

Extends all standard HTML <li> attributes
className - Additional CSS classes (optional)

BreadcrumbLink

Link element for navigable breadcrumb items.

Props:

Extends all standard HTML <a> attributes
asChild - Use child element as link (boolean, default: false)
className - Additional CSS classes (optional)

BreadcrumbPage

The current page indicator (not clickable).

Props:

Extends all standard HTML <span> attributes
className - Additional CSS classes (optional)

BreadcrumbSeparator

Visual separator between breadcrumb items.

Props:

Extends all standard HTML <li> attributes
children - Custom separator content (default: ChevronRight icon)
className - Additional CSS classes (optional)

BreadcrumbEllipsis

Ellipsis indicator for collapsed breadcrumb items.

Props:

Extends all standard HTML <span> attributes
className - Additional CSS classes (optional)

Features

✅ Semantic HTML structure with proper ARIA attributes
✅ Accessible navigation with screen reader support
✅ Customizable separators
✅ Support for custom link components (Next.js Link, etc.)
✅ Ellipsis for long paths
✅ Responsive design
✅ Eclipse design system styling

Best Practices

Always use BreadcrumbPage for the current page (it's non-interactive)
Use BreadcrumbLink for all navigable items
Keep breadcrumb depth reasonable (3-5 levels maximum)
Use ellipsis for very long paths to maintain visual hierarchy
Ensure all links are functional and point to valid routes
The breadcrumb should reflect the actual page hierarchy
Place breadcrumbs near the top of the page, below the header

Accessibility

The Breadcrumb component follows accessibility best practices:

Uses semantic <nav> element with aria-label="breadcrumb"
Current page is marked with aria-current="page"
Separators are hidden from screen readers with aria-hidden="true"
Proper heading hierarchy support
Keyboard navigable links

Integration with Fumadocs

You can integrate breadcrumbs into your documentation pages automatically:

tsx

import { getPage } from "@/lib/source";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@prisma/eclipse";

export default function Page({ params }) {
  const page = getPage(params.slug);
  const breadcrumbs = generateBreadcrumbs(params.slug);
  
  return (
    <>
      <Breadcrumb>
        <BreadcrumbList>
          {breadcrumbs.map((crumb, index) => (
            <React.Fragment key={crumb.url}>
              <BreadcrumbItem>
                {index === breadcrumbs.length - 1 ? (
                  <BreadcrumbPage>{crumb.title}</BreadcrumbPage>
                ) : (
                  <BreadcrumbLink href={crumb.url}>{crumb.title}</BreadcrumbLink>
                )}
              </BreadcrumbItem>
              {index < breadcrumbs.length - 1 && <BreadcrumbSeparator />}
            </React.Fragment>
          ))}
        </BreadcrumbList>
      </Breadcrumb>
      
      <page.data.body />
    </>
  );
}