Breadcrumbs

Navigation component that shows the current page's location within a hierarchical structure.

Installation

Usage

import { Breadcrumbs } from "@/registry/core/breadcrumbs";

export default () => (
  <Breadcrumbs
    items={[
      { href: "/", label: "Home" },
      { href: "/products", label: "Products" },
      { href: "/products/laptop", label: "Laptop" }
    ]}
  />
);

Examples

With Icons

import { Home, BoxCube3D } from "@tailgrids/icons";

<Breadcrumbs
  items={[
    { href: "/", label: "Home", icon: <Home /> },
    { href: "/products", label: "Products", icon: <BoxCube3D /> },
    { href: "/products/laptop", label: "Laptop" }
  ]}
/>;

Divider Types

<Breadcrumbs
  dividerType="chevron"
  items={[
    { href: "/", label: "Home" },
    { href: "/docs", label: "Documentation" }
  ]}
/>

<Breadcrumbs
  dividerType="dot"
  items={[
    { href: "/", label: "Home" },
    { href: "/blog", label: "Blog" }
  ]}
/>

<Breadcrumbs
  dividerType="slash"
  items={[
    { href: "/", label: "Home" },
    { href: "/about", label: "About" }
  ]}
/>

API Reference

Breadcrumbs

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	-	Array of breadcrumb items (required)
`dividerType`	`'slash'`, `'chevron'`, `'dot'`	`'slash'`	Style of divider between items

BreadcrumbItem

Property	Type	Description
`href`	`string`	Link destination (required)
`label`	`string`	Display text (required)
`icon`	`React.ReactNode`	Optional icon before the label

Accessibility

Uses semantic <ol> and <li> elements for proper navigation structure
The last item is visually distinguished with darker text color
Icons inherit the current text color for consistent styling
All links are keyboard accessible

Notes

The last item in the breadcrumb trail is automatically styled with darker text to indicate the current page
Icons are automatically sized to 16px (1rem) via the [&>svg]:size-4 class
The component uses contents display on list items to maintain proper flex layout

CLI

Manual

On this page