Breadcrumbs

Basic trail

Pass an items array of objects. The final item without an href is treated as the current page.

import { Breadcrumbs } from '@eekodigital/raster';

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Reports', href: '/reports' },
    { label: 'Annual report 2024' },
  ]}
/>

Single item

When the user is at the top level, a single item is sufficient.

<Breadcrumbs items={[{ label: 'Dashboard' }]} />

Longer trail

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Compliance', href: '/compliance' },
    { label: 'Audits', href: '/compliance/audits' },
    { label: '2024', href: '/compliance/audits/2024' },
    { label: 'Q1 review' },
  ]}
/>

Router integration

By default, non-current items render as plain <a> tags, which trigger full page navigations. To use a framework-specific link component (React Router, Next, TanStack Router, etc.) for client-side navigation, pass a renderLink adapter. The component receives href, className, and children — pre-bind any additional props (prefetch hints, analytics, transitions) in the adapter itself so Breadcrumbs stays framework-agnostic.

import type { ReactNode } from "react";
import { Link } from "react-router";

export function BreadcrumbLink({
  href,
  className,
  children,
}: {
  href: string;
  className: string;
  children: ReactNode;
}) {
  return (
    <Link prefetch="intent" to={href} className={className}>
      {children}
    </Link>
  );
}

// Usage
import { Breadcrumbs } from "@eekodigital/raster";
import { BreadcrumbLink } from "./components/BreadcrumbLink";

<Breadcrumbs
  items={[
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Acme audit" },
  ]}
  renderLink={BreadcrumbLink}
/>;

The current (last) item and any items without an href are always rendered as a plain <span>, regardless of renderLink.

Props

Prop	Type	Default	Description
`items`	`Array<{ label: string; href?: string }>`	—	Ordered list of crumbs. Items with an `href` are rendered as links; the last item is typically the current page (no href).
`className`	`string`	—	Additional CSS class names on the outer `<nav>` element.
`aria-label`	`string`	`”Breadcrumb”`	Accessible label for the navigation landmark.
`renderLink`	`ComponentType<{ href: string; className: string; children: ReactNode }>`	—	Optional custom renderer for non-current items with an `href`. Lets consumers plug in a router-aware link component without `Breadcrumbs` depending on any specific router.