Navigation

Breadcrumbs

Free

A simple breadcrumb trail with an aria-current page marker.

npx shadcn@latest add @ui-shrushank/breadcrumbs

The install writes a single file to components/ui/Breadcrumbs.tsx, which exports Breadcrumbs.

tsx
import { Breadcrumbs } from "@/components/ui/Breadcrumbs";
tsx
<Breadcrumbs items={items} />

The wayfinding trail baseline.

An aria-current="page" marker on the last crumb.

Every line below was read out of the file you are about to copy, so you can check each one against the source at the bottom of this page.

  • Carries aria-current, aria-label, so its state is exposed and not left to the visual treatment alone.

aria-current tells a screen reader which crumb is "you are here": visually obvious, otherwise invisible.

1 required, 0 optional.

itemsrequired
{ label: string; href?: string }[]

One file, no runtime package. Copy it, or install it with the command at the top of this page.

Breadcrumbs.tsx
export function Breadcrumbs({  items,}: {  items: { label: string; href?: string }[];}) {  return (    <nav aria-label="Breadcrumb">      <ol className="flex items-center gap-2 text-sm">        {items.map((item, i) => (          <li key={item.label} className="flex items-center gap-2">            {item.href ? (              <a                href={item.href}                className="group relative text-stone-500 transition-colors hover:text-stone-900 dark:text-stone-400 dark:hover:text-white"              >                {item.label}                <span className="absolute inset-x-0 -bottom-0.5 h-px origin-left scale-x-0 bg-emerald-700 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:bg-emerald-600" />              </a>            ) : (              <span aria-current="page" className="font-medium text-stone-900 dark:text-white">                {item.label}              </span>            )}            {i < items.length - 1 && <span className="text-stone-300 dark:text-stone-600">/</span>}          </li>        ))}      </ol>    </nav>  );}