Smart Breadcrumbs

Use Smart Breadcrumbs to show where a page sits in a deeper hierarchy. The first and current levels stay visible while an ellipsis menu keeps the middle levels available on compact paths.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

npx shadcn@latest add @sona-ui/smart-breadcrumbs

Basic usage

page-breadcrumbs.tsx

import SmartBreadcrumbs from "@/components/ui/smart-breadcrumbs/smart-breadcrumbs";
 
const items = [
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Design System", href: "/projects/design-system" },
{ label: "Components", href: "/projects/design-system/components" },
{ label: "Buttons" },
];
 
export function PageBreadcrumbs() {
return <SmartBreadcrumbs items={items} />;
}

Usage


const path = [
  { label: "Sona UI", href: "/" },
  { label: "Documentation", href: "/docs/installation" },
  { label: "Components", href: "/components" },
  { label: "Navigation", href: "/docs/fluid-tabs" },
  { label: "Smart Breadcrumbs" },
];
 
export default function SmartBreadcrumbsDemo() {
  return (
    <div className="flex min-h-56 w-full items-center justify-center px-4 py-12">
      <SmartBreadcrumbs items={path} />
    </div>
  );
}

API

Property	Type	Default	Description
`items`	`SmartBreadcrumbItem[]`	`required`	Ordered path from the first level to the current page.
`collapseAt`	`number`	`4`	Minimum number of levels before the middle levels collapse.
`ariaLabel`	`string`	`"Breadcrumb"`	Accessible label for the navigation landmark.
`className`	`string`	`—`	Additional classes for the navigation landmark.

Accessibility

The path is an ordered list inside a labelled navigation landmark. The last level exposes aria-current="page". Hidden levels remain available through a keyboard accessible menu with Escape dismissal and focus management.

Repeated labels and destinations are supported. Supply a unique id on each item when path levels need an identity independent of their label or destination. Long ancestor menus scroll within the available viewport.

Styling

CLI installation registers the shadow utilities automatically. For manual installation, install shadow-plugin and add @plugin "shadow-plugin"; to your Tailwind v4 stylesheet.

Pass className to position the navigation landmark. The component owns the breadcrumb links, separators, truncation, and collapsed menu.

Was this page helpful?

Your response helps us improve component docs.