Breadcrumb

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-breadcrumb

pnpm dlx shadcn@latest add @spaceui/primitives-breadcrumb

Usage

Code

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

Code

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

Features

Custom Separator

Customizes the separator element between breadcrumb items using the BreadcrumbSeparator component.

With Icons

Breadcrumb items rendered with leading contextual icons.

API Reference

This is a custom component, not a Base UI wrapper.

Root navigation container with aria-label="breadcrumb".

BreadcrumbList

Ordered list container for breadcrumb items.

BreadcrumbItem

Individual breadcrumb item container.

BreadcrumbLink

Link element for navigable breadcrumb items. Supports the render prop to use custom link components (e.g., Next.js Link).

Prop	Type	Default	Description
`render`	React.ReactElement	-	Render as a different element (e.g., Next.js Link)

BreadcrumbPage

Non-interactive element representing the current page. Includes aria-current="page".

BreadcrumbSeparator

Separator between breadcrumb items. Defaults to a chevron icon but accepts custom children.

BreadcrumbEllipsis

Ellipsis indicator for collapsed breadcrumb items.