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.

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

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.
  • Draws a focus-visible ring that is separate from its hover treatment, so keyboard users get an affordance mouse users do not take away.

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-stone-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-emerald-600 dark:focus-visible:outline-emerald-400 rounded-sm"              >                {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-stone-100">                {item.label}              </span>            )}            {i < items.length - 1 && <span className="text-stone-300 dark:text-stone-600">/</span>}          </li>        ))}      </ol>    </nav>  );}