Breadcrumb

PreviousNext

A navigation component that displays the current page's location within a hierarchical structure, helping users understand where they are in the application

'use client';

import { Breadcrumb } from '@/ui/Breadcrumb';

export function BreadcrumbDemo() {
  return (
    <Breadcrumb
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Category', href: '/products/category' },
        { label: 'Current Page', href: '/products/category/item' },
      ]}
      theme="light"
    />
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/breadcrumb.json

Usage

import Breadcrumb from '@/docs/lib/ui/breadcrumb';
 
export function Component() {
  return (
    <Breadcrumb
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Category', href: '/products/category' },
        { label: 'Current Page', href: '/products/category/item' },
      ]}
      theme="light"
    />
  );
}

API Reference

Breadcrumb

PropTypeDefaultDescription
items({ href: string; label: string } & ComponentPropsWithoutRef<"li">)[]RequiredArray of breadcrumb items. Each item contains a label (displayed text) and href (link URL). The last item is automatically styled as the current page.
theme"light" | "dark""light"Visual theme of the breadcrumb. Controls the color scheme of the links and separators.

Notes

  • If more than 3 items are provided, the breadcrumb will automatically collapse the middle items, showing only the first two items, a spacer, and the last item
  • The last item in the breadcrumb is automatically marked with aria-current="page" for accessibility
  • Items are separated by a diamond icon
  • The component returns null if an empty items array is provided