Breadcrumb

Show where a page sits and step back up the path.

Select a parent to go back.

Fig. 1 A path with its middle collapsed into a menu. Each step links back up; the last one is where you are.

When to use it

Use Breadcrumb on pages more than one level deep, such as a file inside a folder inside a project. It answers “where am I?” and gives a way back.

Collapse the middle of long paths into an ellipsis menu, and keep the first and last steps visible.

Sidebar

Where you are in the app.

Room to focus

Toggle the live navigation.

The main sections of an app.

Website refresh

Active

Design studio · Updated today

Tasks12

Members3

Due dateOct 24

Overview, activity, and settings.

BreadcrumbThis page

The path back up.

Select a parent to go back.

Pages nested inside others.

Fig. 2 Three ways to move around. Pick by what people are moving between.

How it behaves

Compose BreadcrumbList with BreadcrumbItem, BreadcrumbLink, and BreadcrumbSeparator. End with BreadcrumbPage, which marks the current page with aria-current.

BreadcrumbLink renders an anchor by default. Use render={<Link />} to keep your router's client navigation.

Collapse long paths with BreadcrumbEllipsis, or hide parent items on narrow screens so the current page stays readable. The current page truncates rather than wrapping when the list is set to flex-nowrap.

Every item uses the medium label role in foreground text. Parent links show a soft fill on hover rather than changing color; separators and the ellipsis stay muted. Separators default to a chevron and accept any child.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

breadcrumb-example.tsx

The full source is yours to edit once installed:

breadcrumb.tsx

1import { ChevronRightIcon, EllipsisIcon } from "@/registry/lib/icons"2import { cn } from "@/registry/lib/utils"3import { mergeProps } from "@base-ui/react/merge-props"4import { useRender } from "@base-ui/react/use-render"5import * as React from "react"6 7function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {8  return (9    <nav10      aria-label="breadcrumb"11      data-slot="breadcrumb"12      className={cn(className)}13      {...props}14    />15  )16}17 18function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {19  return (20    <ol21      data-slot="breadcrumb-list"22      className={cn(23        "flex flex-wrap items-center gap-0.5 label-md wrap-break-word text-foreground",24        className25      )}26      {...props}27    />28  )29}30 31function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {32  return (33    <li34      data-slot="breadcrumb-item"35      className={cn("inline-flex min-w-0 items-center gap-1", className)}36      {...props}37    />38  )39}40 41function BreadcrumbLink({42  className,43  render,44  ...props45}: useRender.ComponentProps<"a">) {46  return useRender({47    defaultTagName: "a",48    props: mergeProps<"a">(49      {50        className: cn(51          "rounded-md px-1.5 py-1 transition-[background-color] duration-100 ease-(--ease-out) outline-none hover:bg-control-hover focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:transition-none",52          className53        )54      },55      props56    ),57    render,58    state: {59      slot: "breadcrumb-link"60    }61  })62}63 64// shadcn marks the current page as a disabled link so it reads as part of the trail.65/* oxlint-disable jsx-a11y/prefer-tag-over-role */66function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {67  return (68    <span69      data-slot="breadcrumb-page"70      role="link"71      aria-disabled="true"72      aria-current="page"73      className={cn("truncate px-1.5 text-foreground", className)}74      {...props}75    />76  )77}78 79/* oxlint-enable jsx-a11y/prefer-tag-over-role */80 81function BreadcrumbSeparator({82  children,83  className,84  ...props85}: React.ComponentProps<"li">) {86  return (87    <li88      data-slot="breadcrumb-separator"89      role="presentation"90      aria-hidden="true"91      className={cn("text-muted-foreground [&>svg]:size-3.5", className)}92      {...props}93    >94      {children ?? <ChevronRightIcon />}95    </li>96  )97}98 99function BreadcrumbEllipsis({100  className,101  ...props102}: React.ComponentProps<"span">) {103  return (104    <span105      data-slot="breadcrumb-ellipsis"106      role="presentation"107      aria-hidden="true"108      className={cn(109        "flex size-5 items-center justify-center text-muted-foreground [&>svg]:size-4",110        className111      )}112      {...props}113    >114      <EllipsisIcon />115      <span className="sr-only">More</span>116    </span>117  )118}119 120export {121  Breadcrumb,122  BreadcrumbEllipsis,123  BreadcrumbItem,124  BreadcrumbLink,125  BreadcrumbList,126  BreadcrumbPage,127  BreadcrumbSeparator128}129