Breadcrumb

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Installation

npx shadcn@latest add breadcrumb

Usage

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

export function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink>Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink>Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Simple Example

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Examples

Custom Separator

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Collapsed

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

With Icons

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Variations

Loading component...

import {   ChevronRightIcon,   SlashIcon,   ArrowRightIcon,   DotIcon,  HomeIcon,  FolderIcon,  FileTextIcon} from "lucide-react"import {  Breadcrumb,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@/components/ui/breadcrumb"export default function BreadcrumbVariations() {  return (    <div className="w-full p-6 space-y-8">      <div className="max-w-4xl mx-auto space-y-8">        <div className="space-y-4">          <h3 className="text-lg font-semibold">Different Separators</h3>          <div className="space-y-4">            <div>              <p className="text-sm text-muted-foreground mb-2">Default (Chevron Right)</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>            <div>              <p className="text-sm text-muted-foreground mb-2">Slash Separator</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <SlashIcon />                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <SlashIcon />                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>            <div>              <p className="text-sm text-muted-foreground mb-2">Arrow Separator</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <ArrowRightIcon />                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <ArrowRightIcon />                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>            <div>              <p className="text-sm text-muted-foreground mb-2">Dot Separator</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <DotIcon />                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <DotIcon />                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>            <div>              <p className="text-sm text-muted-foreground mb-2">Text Separator</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <span className="text-muted-foreground">·</span>                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator>                    <span className="text-muted-foreground">·</span>                  </BreadcrumbSeparator>                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>          </div>        </div>        <div className="space-y-4">          <h3 className="text-lg font-semibold">With Icons</h3>          <div className="space-y-4">            <div>              <p className="text-sm text-muted-foreground mb-2">File System Navigation</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink className="flex items-center gap-2">                      <HomeIcon className="size-4" />                      Home                    </BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbLink className="flex items-center gap-2">                      <FolderIcon className="size-4" />                      Projects                    </BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbPage className="flex items-center gap-2">                      <FileTextIcon className="size-4" />                      README.md                    </BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>            <div>              <p className="text-sm text-muted-foreground mb-2">Icon Only Home</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink aria-label="Home">                      <HomeIcon className="size-4" />                    </BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbLink>Documentation</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbPage>Getting Started</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>          </div>        </div>        <div className="space-y-4">          <h3 className="text-lg font-semibold">Different Sizes</h3>          <div className="space-y-4">            <div>              <p className="text-sm text-muted-foreground mb-2">Small</p>              <Breadcrumb>                <BreadcrumbList className="text-xs">                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>            <div>              <p className="text-sm text-muted-foreground mb-2">Default</p>              <Breadcrumb>                <BreadcrumbList>                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>            <div>              <p className="text-sm text-muted-foreground mb-2">Large</p>              <Breadcrumb>                <BreadcrumbList className="text-base">                  <BreadcrumbItem>                    <BreadcrumbLink>Home</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbLink>Docs</BreadcrumbLink>                  </BreadcrumbItem>                  <BreadcrumbSeparator />                  <BreadcrumbItem>                    <BreadcrumbPage>Components</BreadcrumbPage>                  </BreadcrumbItem>                </BreadcrumbList>              </Breadcrumb>            </div>          </div>        </div>      </div>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

API Reference

The root breadcrumb navigation container.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	BreadcrumbList component.

BreadcrumbList

The ordered list container for breadcrumb items.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	BreadcrumbItem components with separators.

BreadcrumbItem

Individual breadcrumb item wrapper.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	BreadcrumbLink, BreadcrumbPage, or custom content.

BreadcrumbLink

Navigational link within breadcrumb.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child component (useful for Next.js Link).
`href`	`string`	-	Link destination (when not using asChild).
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	Link text or content.

BreadcrumbPage

Current page indicator (non-interactive).

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	Current page text or content.

BreadcrumbSeparator

Visual separator between breadcrumb items.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	`<ChevronRight />`	Custom separator content (icon or text).

BreadcrumbEllipsis

Ellipsis indicator for collapsed breadcrumbs.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.

Implementation Details

Architecture

Built with semantic HTML and ARIA attributes for accessibility:

Navigation Landmark: Uses <nav> with aria-label="breadcrumb"
Ordered List: Structured as <ol> for logical hierarchy
Current Page: Marked with aria-current="page" and role="link"
Separators: Hidden from screen readers with aria-hidden="true"

Component Structure

<Breadcrumb>                    {/* <nav aria-label="breadcrumb"> */}
  <BreadcrumbList>             {/* <ol> */}
    <BreadcrumbItem>           {/* <li> */}
      <BreadcrumbLink />       {/* <a> or custom component */}
    </BreadcrumbItem>
    <BreadcrumbSeparator />    {/* <li role="presentation"> */}
    <BreadcrumbItem>
      <BreadcrumbPage />       {/* <span aria-current="page"> */}
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Responsive Design

Breadcrumbs automatically wrap and scale:

Text Wrapping: Uses break-words for long paths
Flexible Spacing: Responsive gap sizing (gap-1.5 on mobile, gap-2.5 on desktop)
Icon Scaling: Separators sized appropriately (size-3.5)

Best Practices

Structure breadcrumbs to reflect logical navigation:

// Good - Clear hierarchy
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products/laptops">Laptops</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>MacBook Pro</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Link Integration

Use the asChild prop for framework-specific routing:

import Link from "next/link"

<BreadcrumbLink asChild>
  <Link href="/dashboard">Dashboard</Link>
</BreadcrumbLink>

Content Guidelines

Keep labels concise: Use short, descriptive terms
Avoid redundancy: Don't repeat the site name in every breadcrumb
Use sentence case: Capitalize only the first letter
Current page: Always use BreadcrumbPage for the current location

Common Use Cases

Product catalog and category navigation:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Documentation Site

Multi-level documentation navigation with icon home:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

File and folder navigation interface:

function FileBreadcrumb({ path }) {
  const pathSegments = path.split('/').filter(Boolean)
  
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/files" className="flex items-center gap-2">
              <HomeIcon className="size-4" />
              Root
            </Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        {pathSegments.map((segment, index) => {
          const isLast = index === pathSegments.length - 1
          const href = `/files/${pathSegments.slice(0, index + 1).join('/')}`
          
          return (
            <React.Fragment key={index}>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                {isLast ? (
                  <BreadcrumbPage className="flex items-center gap-2">
                    <FileIcon className="size-4" />
                    {segment}
                  </BreadcrumbPage>
                ) : (
                  <BreadcrumbLink asChild>
                    <Link href={href} className="flex items-center gap-2">
                      <FolderIcon className="size-4" />
                      {segment}
                    </Link>
                  </BreadcrumbLink>
                )}
              </BreadcrumbItem>
            </React.Fragment>
          )
        })}
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Advanced Patterns

Responsive Breadcrumbs

Handle long navigation paths gracefully:

function ResponsiveBreadcrumb({ items, maxItems = 3 }) {
  const [isExpanded, setIsExpanded] = useState(false)
  
  if (items.length <= maxItems) {
    return <NormalBreadcrumb items={items} />
  }
  
  const visibleItems = isExpanded 
    ? items 
    : [items[0], ...items.slice(-2)]
  
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href={items[0].href}>{items[0].label}</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        
        {!isExpanded && items.length > maxItems && (
          <>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <button
                onClick={() => setIsExpanded(true)}
                className="flex items-center gap-1"
              >
                <BreadcrumbEllipsis />
              </button>
            </BreadcrumbItem>
          </>
        )}
        
        {/* Render remaining items */}
        {visibleItems.slice(1).map((item, index) => (
          <React.Fragment key={index}>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              {item.href ? (
                <BreadcrumbLink asChild>
                  <Link href={item.href}>{item.label}</Link>
                </BreadcrumbLink>
              ) : (
                <BreadcrumbPage>{item.label}</BreadcrumbPage>
              )}
            </BreadcrumbItem>
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Dynamic Breadcrumbs

Generate breadcrumbs from URL or route data:

function DynamicBreadcrumb() {
  const pathname = usePathname()
  const router = useRouter()
  
  const breadcrumbItems = useMemo(() => {
    const segments = pathname.split('/').filter(Boolean)
    
    return segments.map((segment, index) => {
      const href = '/' + segments.slice(0, index + 1).join('/')
      const label = segment.charAt(0).toUpperCase() + segment.slice(1)
      const isLast = index === segments.length - 1
      
      return { href: isLast ? null : href, label, isLast }
    })
  }, [pathname])
  
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        {breadcrumbItems.map((item, index) => (
          <React.Fragment key={index}>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              {item.isLast ? (
                <BreadcrumbPage>{item.label}</BreadcrumbPage>
              ) : (
                <BreadcrumbLink asChild>
                  <Link href={item.href!}>{item.label}</Link>
                </BreadcrumbLink>
              )}
            </BreadcrumbItem>
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Combine with DropdownMenu for additional navigation options:

function BreadcrumbWithMenu() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1">
              Products
              <ChevronDownIcon className="size-4" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem asChild>
                <Link href="/products/electronics">Electronics</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/clothing">Clothing</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/books">Books</Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>MacBook Pro</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Accessibility

Breadcrumbs provide rich semantic information:

Navigation landmark: Announced as "breadcrumb navigation"
Ordered structure: Screen readers understand the hierarchy
Current location: Clearly identified with aria-current="page"

Standard link navigation applies:

Tab: Move between breadcrumb links
Enter/Space: Activate links
Arrow keys: Not used (standard link behavior)

ARIA Attributes

The component automatically handles:

// Automatically applied
<nav aria-label="breadcrumb">
  <ol>
    <li>
      <a href="/home">Home</a>
    </li>
    <li role="presentation" aria-hidden="true">
      <ChevronRightIcon />
    </li>
    <li>
      <span role="link" aria-disabled="true" aria-current="page">
        Current Page
      </span>
    </li>
  </ol>
</nav>

SEO Benefits

Search Engine Optimization

Breadcrumbs improve SEO through:

Internal Linking: Creates natural link hierarchy
Context Signals: Helps search engines understand site structure
Rich Snippets: May appear in search results
User Experience: Reduces bounce rate with better navigation

Structured Data

Consider adding JSON-LD structured data:

function SEOBreadcrumb({ items }) {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": items.map((item, index) => ({
      "@type": "ListItem",
      "position": index + 1,
      "name": item.label,
      "item": item.href ? `https://example.com${item.href}` : undefined
    }))
  }
  
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <Breadcrumb>
        {/* Breadcrumb implementation */}
      </Breadcrumb>
    </>
  )
}

Performance Considerations

Optimize for single-page applications:

// Use Next.js Link for client-side navigation
<BreadcrumbLink asChild>
  <Link href="/products" prefetch={false}>
    Products
  </Link>
</BreadcrumbLink>

Dynamic Loading

For large site structures, consider lazy loading:

function LazyBreadcrumb({ path }) {
  const [breadcrumbData, setBreadcrumbData] = useState(null)
  
  useEffect(() => {
    // Fetch breadcrumb data based on current path
    fetchBreadcrumbData(path).then(setBreadcrumbData)
  }, [path])
  
  if (!breadcrumbData) {
    return <BreadcrumbSkeleton />
  }
  
  return <Breadcrumb>{/* Render with data */}</Breadcrumb>
}

Troubleshooting

Common Issues

Links not working: Ensure proper asChild usage with routing libraries
Separators not aligned: Check icon sizing and container spacing
Responsive issues: Verify text wrapping and gap classes
Accessibility warnings: Ensure current page uses BreadcrumbPage

Debugging

// Add visual debugging
<BreadcrumbList className="border border-red-200 bg-red-50">
  {/* Breadcrumb items */}
</BreadcrumbList>

// Log breadcrumb structure
console.log('Breadcrumb path:', pathname.split('/'))

Integration Examples

With App Router

// app/products/[category]/[id]/page.tsx
export default function ProductPage({ params }) {
  return (
    <div>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link href="/">Home</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link href="/products">Products</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link href={`/products/${params.category}`}>
                {params.category}
              </Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>{params.id}</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}

Reactbreadcrumb

Reactdropdown-menu

Reactbreadcrumb

Reactbreadcrumb

Reactbreadcrumb

Reactdropdown-menu

Reactbreadcrumb

Reactbreadcrumb

Reactbreadcrumb

Reactbreadcrumb

Reactbreadcrumb

On this page