NOCTA UI

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

Install the Breadcrumb component using the nocta-ui CLI:

npx @nocta-ui/cli add breadcrumb

Then import the components you need:

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

Usage

Default Breadcrumb

Custom Separator

With Icons

With Ellipsis

Sizes

Small

Medium (Default)

Large

Ghost Variant

API Reference

Breadcrumb

Prop

Type

BreadcrumbList

Prop

Type

BreadcrumbItem

Prop

Type

BreadcrumbLink

Prop

Type

BreadcrumbPage

Prop

Type

BreadcrumbSeparator

Prop

Type

BreadcrumbEllipsis

Prop

Type

Tooltip

A floating tooltip component that displays additional information on hover or focus with smart positioning and accessibility features

Menubar

A top-level application menubar with grouped actions, submenus, and full keyboard navigation

On this page

Installation
Usage
Default Breadcrumb
Custom Separator
With Icons
With Ellipsis
Sizes
Ghost Variant
API Reference
Breadcrumb
BreadcrumbList
BreadcrumbItem
BreadcrumbLink
BreadcrumbPage
BreadcrumbSeparator
BreadcrumbEllipsis