Breadcrumb

Shows the path to the current page using a hierarchy of links.

Installation

bash
npx shadcn@latest add breadcrumb

Import

import {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,} from "@/components/ui/breadcrumb"

Basic

Custom separator

Props

PROPTYPEDEFAULTDESCRIPTION
hrefstring—On BreadcrumbLink — the link destination
asChildbooleanfalseOn BreadcrumbLink — renders children as the link element (use with Next.js Link)
childrenReactNode—On BreadcrumbSeparator — custom separator icon

Notes

  • BreadcrumbPage marks the current page — renders as a non-link span with aria-current="page"
  • BreadcrumbEllipsis is a visual indicator only; consider wrapping it in a DropdownMenu for collapsed navigation on mobile