Breadcrumb

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

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/breadcrumb.json

Usage

Pass an `items` array. Items without `href` render as the current page.

TSImport

import { Breadcrumb } from "@/components/ui/breadcrumb";

TSExample

import { Breadcrumb } from "@/components/ui/breadcrumb";

export function Example() {
  return (
    <Breadcrumb
      items={[
        { label: "Home", href: "/" },
        { label: "Settings" },
      ]}
    />
  );
}

Composition

Anatomy of the Breadcrumb component.

Breadcrumb                       (single component — pass items as data)
├── items={[
│     { label, href? },          (omit href → renders as current page)
│     { label, href, icon },     (icon is any ReactNode, typically lucide)
│     { label, href, hideOnMobile: true },
│   ]}
├── separator={<Slash />}        (optional override, defaults to ChevronRight)
└── maxItems={4}                 (collapse the middle to "…" when over)

Need a router-aware <Link> or tooltip-wrapped crumb? The slot exports
(BreadcrumbList / BreadcrumbItem / BreadcrumbLink / …) are still exported
from the same file as an escape hatch.

Default

Three-level path. Omit `href` on the current crumb so it renders as the page label.

Ellipsis

Pass `maxItems` and the middle crumbs collapse into an ellipsis automatically.

With icons

Each item accepts an `icon` ReactNode rendered before the label.

API Reference

Props exposed by the Breadcrumb component.

Breadcrumb

Prop	Type	Default	Description
`items`	BreadcrumbItemSpec[]	—	Crumbs to render. Items without `href` render as the current page.
`separator`	ReactNode	ChevronRightIcon	Override the separator rendered between crumbs.
`maxItems`	number	—	Collapse the middle items into a single ellipsis once the list is longer than this.
`className`	string	—	Class names appended to the outer <nav>.

BreadcrumbItemSpec

Prop	Type	Default	Description
`label`	ReactNode	—	Crumb label. Pass a router-aware `<Link>` here when you need client navigation.
`href`	string	—	Optional. Omit on the current page so it renders as a non-link.
`icon`	ReactNode	—	Leading icon rendered before the label.
`hideOnMobile`	boolean	false	Hide this crumb (and its trailing separator) below the `md` breakpoint.