Navigation trail showing the current page location within a hierarchy.

Installation

npx @sigil-ui/cli add breadcrumb

Preview

Import

import { Breadcrumb } from "@sigil-ui/components";

Usage

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Docs", href: "/docs" },
    { label: "Breadcrumb" },
  ]}
/>

Examples

Custom separator

<Breadcrumb
  separator="›"
  items={[
    { label: "Dashboard", href: "/dashboard" },
    { label: "Settings", href: "/settings" },
    { label: "Profile" },
  ]}
/>

With icons as separator

<Breadcrumb
  separator={<ChevronRight className="size-3" />}
  items={[
    { label: "Home", href: "/" },
    { label: "Components", href: "/docs/components" },
    { label: "Breadcrumb" },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	—	Trail items; last item is the current page
`separator`	`ReactNode`	`"/"`	Separator between items
`className`	`string`	—	Additional CSS classes

BreadcrumbItem

Prop	Type	Description
`label`	`string`	Display text
`href`	`string`	Link URL (omit for current page)

Tokens

This component reads these CSS variables:

--s-text — current page text color
--s-text-muted — ancestor links and separator color

On this page