Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Home Icon

Breadcrumb with Ellipsis (Home Icon) for React

A breadcrumb trail with a home icon and an ellipsis standing in for the collapsed middle of a deep path.

Framework
UI library

Deep paths overflow. This trail keeps the home icon, the parent and the current page, and puts BreadcrumbEllipsis where the levels between them would be. Use it in file trees, nested docs and category pages; when people need to reach the hidden levels, use the dropdown version instead.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Does the ellipsis open anything?

No. BreadcrumbEllipsis is only the mark: a more icon, hidden from assistive tech, with visually hidden More text. It isn't a button.

How do I let people reach the hidden levels?

Put a Dropdown Menu in that BreadcrumbItem, with the ellipsis or an icon as its trigger and the hidden levels as items. The dropdown version does that with a folder icon.

How is the home icon named?

The link to / holds only a HomeIcon at size-4, hidden from assistive tech, so the link carries aria-label="Home". Screen readers announce it as the Home link.

Which separator sits between the crumbs?

An empty BreadcrumbSeparator renders a chevron, hidden from assistive tech.

Which levels should stay visible?

The root, the direct parent and the current page. Those answer where am I and how do I go up, and the levels between them are the ones people use least.

How do the links go through my router?

BreadcrumbLink takes the link through render, as in render={<Link href="/" />} with the Next.js Link.

All 14 breadcrumb examples