Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Radix UI Base UI

Badge Button

On This Page

Installation Usage Examples Basic Custom separator Dropdown Collapsed Link component API Reference Breadcrumb BreadcrumbList BreadcrumbItem BreadcrumbLink BreadcrumbPage BreadcrumbSeparator BreadcrumbEllipsis

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add breadcrumb

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.

You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink />.

The Breadcrumb component is the root navigation element that wraps all breadcrumb components.

Prop	Type	Default
`className`	`string`	-

The BreadcrumbList component displays the ordered list of breadcrumb items.

Prop	Type	Default
`className`	`string`	-

The BreadcrumbItem component wraps individual breadcrumb items.

Prop	Type	Default
`className`	`string`	-

The BreadcrumbLink component displays a clickable link in the breadcrumb.

Prop	Type	Default
`className`	`string`	-

The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).

Prop	Type	Default
`className`	`string`	-

The BreadcrumbSeparator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.

Prop	Type	Default
`children`	`React.ReactNode`	-
`className`	`string`	-

The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.

Prop	Type	Default
`className`	`string`	-

import Link from "next/link"
import {
  Breadcrumb,

import {
  Breadcrumb,
  BreadcrumbItem,

import Link from "next/link"
import {
  Breadcrumb,

import Link from "next/link"
import {
  Breadcrumb,

import Link from "next/link"
import {
  Breadcrumb,

import Link from "next/link"
import {
  Breadcrumb,