Skip to component
GGamma

Breadcrumb trail

A wrapping breadcrumb path with native links, a named navigation landmark and a clear current location.

New

Breadcrumb trail

The path to this component remains visible, including on narrow surfaces.

Live previewUse keyboard to interact

Implementation

1import type { HTMLAttributes, ReactNode } from "react";2import { ChevronRight } from "lucide-react";3 4export type BreadcrumbItem = { label: string; href?: string; icon?: ReactNode };5export type BreadcrumbTrailProps = HTMLAttributes<HTMLElement> & {6  items: BreadcrumbItem[];7  label?: string;8};9 10/** Hierarchical links with a labelled navigation landmark and one current page. */11export function BreadcrumbTrail({12  items,13  label = "Breadcrumb",14  className = "",15  ...navProps16}: BreadcrumbTrailProps) {17  if (!items.length) return null;18  return (19    <nav20      {...navProps}21      className={`breadcrumb-trail ${className}`}22      aria-label={navProps["aria-label"] ?? label}23    >24      <ol>25        {items.map((item, index) => {26          const current = index === items.length - 1;27          const content = (28            <>