Breadcrumb

Installation

Install the Breadcrumb component using the nocta-ui CLI:

npx nocta-ui add breadcrumb

Then import the components you need:

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@/components/ui/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
`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

On this page