Breadcrumbs

Clear path navigation for nested pages and flows.

Installation

npx shadcn@latest add @iconiq/breadcrumbs

File Structure

Usage

"use client";

import { Home } from "lucide-react";

import { Breadcrumbs } from "@/components/ui/breadcrumbs";

const items = [
  { label: "Home", href: "/", icon: <Home className="size-3.5" /> },
  { label: "Components", href: "/components" },
  { label: "Breadcrumbs" },
];

export function BreadcrumbsPreview() {
  return (
    <Breadcrumbs
      className="w-full max-w-xl"
      maxItems={4}
      items={items}
    />
  );
}

Props

Props
Description

Breadcrumb

ariaLabel

Accessible label for the root nav landmark. Override for localization.

Type string·Default "Breadcrumb"

className

Merged onto the nav element for placement inside headers, toolbars, and page shells.

Type string

Breadcrumbs

items

Ordered trail segments with label, optional href, icon, and title fields.

Type BreadcrumbItemData[]

maxItems

When the trail exceeds this count, middle segments collapse into BreadcrumbEllipsisMenu.

Type number

truncate

Applies max-width truncation to linked and current-page labels.

Type boolean·Default false

separator

Custom separator content passed to each BreadcrumbSeparator in the generated trail.

Type ReactNode

renderLink

Optional custom link renderer for framework routers such as Next.js Link.

Type (props) => ReactNode

siteUrl

Absolute site origin used when BreadcrumbJsonLd is emitted alongside the trail.

Type string

currentPath

Fallback path for the final breadcrumb item in JSON-LD when it has no href.

Type string

listClassName

Merged onto the internal BreadcrumbList element.

Type string

BreadcrumbList

className

Merged with the default flex wrapping, spacing, and muted text styles.

Type string

BreadcrumbItem

className

Merged with the inline-flex item layout. Dynamic items should receive stable React keys when rendered from arrays.

Type string

BreadcrumbLink

href

Destination for the linked segment. You can also compose a router link with the render prop.

Type string

render

Optional Base UI render override for composing with framework-specific links while preserving merged props.

Type ReactElement | render function

truncate

Applies responsive max-width truncation with an optional title tooltip.

Type boolean·Default false

title

Native title attribute for truncated or abbreviated link labels.

Type string

className

Merged with the default focus ring, color transition, and hover foreground treatment.

Type string

BreadcrumbPage

truncate

Applies responsive max-width truncation to the label.

Type boolean·Default false

title

Native title attribute for truncated labels.

Type string

className

Merged with the default foreground current-page text style.

Type string

BreadcrumbSeparator

children

Optional custom separator content. When omitted, ChevronRightIcon is rendered.

Type ReactNode

className

Merged with the default icon sizing class for separator icons.

Type string

BreadcrumbEllipsis

className

Merged with the default 20px square centered icon layout.

Type string

BreadcrumbEllipsisMenu

items

Collapsed segments rendered inside the overflow menu. Each item accepts an optional icon.

Type BreadcrumbEllipsisMenuItem[]

menuLabel

Accessible label for the overflow trigger button.

Type string·Default "Show collapsed breadcrumb items"

className

Merged onto the relative menu wrapper.

Type string

BreadcrumbJsonLd

items

Trail labels and optional href values.

Type BreadcrumbJsonLdItem[]

siteUrl

Absolute site origin used to resolve relative breadcrumb URLs.

Type string

currentPath

Fallback path for the final breadcrumb when it has no href.

Type string·Default "/"

Accessibility and motion

The compound API keeps semantic breadcrumb structure while layering Motion on top.

BreadcrumbList wraps the trail in an ordered list.

BreadcrumbLink exposes a visible focus ring for keyboard users.

BreadcrumbPage marks the final segment with aria-current='page'.

BreadcrumbEllipsisMenu uses aria-expanded, aria-haspopup, and Escape to dismiss.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react, motion, lucide-react.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.