Skip to main content

​
Overview

The Breadcrumb component provides a way to display the current page’s location within a navigational hierarchy. It consists of multiple sub-components that work together to create accessible breadcrumb navigation.

​
Components

The root container component for breadcrumb navigation.
​
separator
React.ReactNode
Custom separator element to display between breadcrumb items.
​
ref
React.Ref<HTMLElement>
Ref forwarded to the underlying nav element.
Inherits all props from React.ComponentPropsWithoutRef<'nav'>. An ordered list container for breadcrumb items.
​
className
string
Additional CSS classes to apply to the list.
​
ref
React.Ref<HTMLOListElement>
Ref forwarded to the underlying ol element.
Inherits all props from React.ComponentPropsWithoutRef<'ol'>. A list item wrapper for individual breadcrumb entries.
​
className
string
Additional CSS classes to apply to the item.
​
ref
React.Ref<HTMLLIElement>
Ref forwarded to the underlying li element.
Inherits all props from React.ComponentPropsWithoutRef<'li'>. A link component that automatically handles internal and external links.
​
asChild
boolean
When true, uses Radix UI’s Slot component to merge props with the child element.
​
href
string
The URL the link points to. Internal links (starting with ’/’) use Next.js Link component.
​
className
string
Additional CSS classes to apply to the link.
​
ref
React.Ref<HTMLAnchorElement>
Ref forwarded to the underlying anchor element.
Inherits all props from React.ComponentPropsWithoutRef<'a'>. Represents the current page in the breadcrumb trail.
​
className
string
Additional CSS classes to apply to the current page indicator.
​
ref
React.Ref<HTMLSpanElement>
Ref forwarded to the underlying span element.
Inherits all props from React.ComponentPropsWithoutRef<'span'>. A visual separator between breadcrumb items.
​
children
React.ReactNode
Custom separator content. Defaults to ChevronRight icon.
​
className
string
Additional CSS classes to apply to the separator.
Inherits all props from React.ComponentProps<'li'>. Displays an ellipsis icon to indicate collapsed breadcrumb items.
​
className
string
Additional CSS classes to apply to the ellipsis.
Inherits all props from React.ComponentProps<'span'>.

​
Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from '@repo/ui/breadcrumb'
import { Slash } from 'lucide-react'

function MyBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/programs">Programs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

​
Accessibility

The Breadcrumb component includes several accessibility features:
  • The root nav element has aria-label="breadcrumb" for screen readers
  • The current page uses role="link", aria-disabled="true", and aria-current="page"
  • Separators use role="presentation" and aria-hidden="true" to hide them from screen readers
  • The ellipsis includes a visually hidden “More” label for screen readers

​
Source

Implementation: /home/daytona/workspace/source/packages/ui/src/breadcrumb/breadcrumb.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us