Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Breadcrumb with Ellipsis (Standard) for React

A breadcrumb reading Home, an ellipsis, Components, and Breadcrumb. The ellipsis stands in for the collapsed middle.

The trail keeps Home, then an ellipsis, then Components, then Breadcrumb as the current page. The ellipsis does not open. It only marks levels that are left out.

Use it when a deep path would overflow and the hidden levels can be dropped. If people still need those levels, put them in a Dropdown Menu. In React, Base UI does not decide what the ellipsis hides.

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

Anatomy

Breadcrumb anatomy: link, ellipsis, separator, item, page

Usage

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/components" />}>
        Components
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

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 trail announced?

Breadcrumb renders a nav labeled breadcrumb around an ordered list, so screen readers announce a breadcrumb landmark and the number of items. Home and Components are read as links.

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.

API Reference

Breadcrumb

No extra props in this demo. The rest is on the Breadcrumb page.

All 14 breadcrumb examples