Breadcrumb

Installation

Terminal

npx nocta-ui add breadcrumb

Introduction

A breadcrumb trail on a page indicates the page's position in the site hierarchy. A user can navigate all the way up in the site hierarchy, one level at a time, by following the breadcrumb trail.

Anatomy

Import the breadcrumb primitives from @/components/ui/breadcrumb.

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

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

Usage

Basic

Custom Separator

You can customize the separator between breadcrumb items.

With Icons

You can include icons in your breadcrumb links.

With Ellipsis

For long paths, you can use ellipsis to truncate the breadcrumb.

Sizes

The breadcrumb component supports three sizes: sm, md (default), and lg.

Small

Medium (Default)

Large

Ghost Variant

Use the ghost variant for a more subtle appearance.

API Reference

The root container for breadcrumb navigation.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the breadcrumb
`separator`	`React.ReactNode`	`"/"`	Default separator between items
`className`	`string`	`undefined`	Additional CSS classes

BreadcrumbList

Contains the list of breadcrumb items.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	Inherited	Override the size from context
`className`	`string`	`undefined`	Additional CSS classes

BreadcrumbItem

A wrapper for individual breadcrumb items.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	Inherited	Override the size from context
`className`	`string`	`undefined`	Additional CSS classes

BreadcrumbLink

A navigable link in the breadcrumb trail.

Prop	Type	Default	Description
`variant`	`"default" \| "ghost"`	`"default"`	The visual style of the link
`size`	`"sm" \| "md" \| "lg"`	Inherited	Override the size from context
`asChild`	`boolean`	`false`	Render as child component
`className`	`string`	`undefined`	Additional CSS classes

BreadcrumbPage

Represents the current page in the breadcrumb trail.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	Inherited	Override the size from context
`className`	`string`	`undefined`	Additional CSS classes

BreadcrumbSeparator

A separator between breadcrumb items.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	Inherited	Override the size from context
`children`	`React.ReactNode`	Inherited	Custom separator content
`className`	`string`	`undefined`	Additional CSS classes

BreadcrumbEllipsis

An ellipsis indicator for truncated breadcrumb paths.

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes

Accessibility

The breadcrumb component is built with accessibility in mind:

Uses semantic HTML with nav and ol elements
Includes proper ARIA labels and roles
Supports keyboard navigation
Screen reader friendly with appropriate labels
Current page is marked with aria-current="page"

Usage Notes

Current Page: Always use BreadcrumbPage for the current page, never BreadcrumbLink
Separators: Place BreadcrumbSeparator between each breadcrumb item
Icons: Icons work best with the ghost variant for better visual balance
Truncation: Use BreadcrumbEllipsis for paths longer than 4-5 items
Navigation: Links should use actual navigation (href) for better accessibility

On this page