Can visitors open the hidden ancestors without JavaScript?

Yes. The middle path uses a native details and summary disclosure.

Does the final item need a URL?

No. The final item is rendered as the current page and is marked with aria-current=page.

What happens when an ancestor has no href?

It stays visible as plain text inside the breadcrumb hierarchy rather than becoming a fabricated link.

Breadcrumb Overflow

A compact semantic breadcrumb that groups middle ancestors in a native disclosure.

Customise

Code

const items = [
  {
    "label": "Workspace",
    "href": "/workspace"
  },
  {
    "label": "Projects",
    "href": "/workspace/projects"
  },
  {
    "label": "Design system",
    "href": "/workspace/projects/design-system"
  },
  {
    "label": "Navigation",
    "href": "/workspace/projects/design-system/navigation"
  },
  {
    "label": "Breadcrumb overflow"
  }
];

<NavBreadcrumbOverflow
  items={items}
/>

Breadcrumb Overflow keeps the root and current page visible while grouping the middle ancestors of a deep path under a count-labelled disclosure. It gives documentation, commerce, and workspace pages a compact route context without duplicating the breadcrumb tree for different screen sizes.

The component derives its structure from one ordered items array. Ancestors with destinations become links, the current page is never linked, and the native details control works without JavaScript.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/nav-breadcrumb-overflow

Usage

import { NavBreadcrumbOverflow } from "@/components/nav-breadcrumb-overflow";

<NavBreadcrumbOverflow
  items={[
    { label: "Docs", href: "/docs" },
    { label: "Components", href: "/docs/components" },
    { label: "Forms", href: "/docs/components/forms" },
    { label: "Preference center" },
  ]}
/>

Props

Prop	Type	Default	Description
items	Array<{ label: string; href?: string }>	required	Ordered ancestors followed by the current page, which has no href.
label	string	Breadcrumb	Accessible name for the navigation landmark.
className	string	undefined	Additional classes merged onto the root.

Customisation

Pass the route hierarchy in reading order. With three or more entries, the first ancestor and current page stay visible while the middle entries move into a count-labelled disclosure. One or two entries render directly. The component never creates destinations for missing ancestor href values.

<NavBreadcrumbOverflow
  label="Workspace location"
  items={[
    { label: "Workspace", href: "/workspace" },
    { label: "Settings", href: "/workspace/settings" },
    { label: "Notifications" },
  ]}
/>

Frequently asked questions

Can visitors open the hidden ancestors without JavaScript?: Yes. The middle path uses a native details and summary disclosure.
Does the final item need a URL?: No. The final item is rendered as the current page and is marked with aria-current=page.
What happens when an ancestor has no href?: It stays visible as plain text inside the breadcrumb hierarchy rather than becoming a fabricated link.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js documentation and workspace experiences with considered navigation. Browse the paid templates that pair with these free components.Explore Template Empire templates