shadcn ships an ellipsis for long breadcrumbs, so plan the collapsed middle

A breadcrumb tells a user where they are, but a long one can push the page they want off a phone screen. shadcn's breadcrumb has a piece for that case, and its page documents it as a collapsed state.

What the shadcn page coversCopy Anchor Link

The page describes the component as "Displays the path to the current resource using a hierarchy of links." The install command is pnpm dlx shadcn@latest add breadcrumb, with tabs for npm, yarn and bun. The usage import lists Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage and BreadcrumbSeparator from @/components/ui/breadcrumb.

The page says: "We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long." The API reference describes it as displaying "an ellipsis indicator for collapsed breadcrumb items." The usage import does not list BreadcrumbEllipsis, so you import it from the same file as the other parts.

The page describes BreadcrumbPage as displaying "the current page in the breadcrumb (non-clickable)." The examples cover basic, custom separator, dropdown, collapsed, a link component and right-to-left layouts. The page does not mention aria-current, and it has no sentence about link accessibility. The rules below are ours, and they are labelled as ours.

Build a path that ends on the current pageCopy Anchor Link

The current page is the last item, and it is not a link. Every item above it is a link. The page's BreadcrumbPage note supports that split: the current page is non-clickable. Put a BreadcrumbSeparator between items, not after the last one:

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function ProjectBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/projects/acme">Acme</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

The BreadcrumbLink takes an href in this sketch. The page shows a render prop for a custom link component, which you use when your router needs its own link type. Check the page's Link component example before you swap in a router link, and copy its exact pattern rather than this sketch.

The current page should match the page's title, so a reader who lands on it sees the same name in the path and in the heading.

Collapse the middle of a long pathCopy Anchor Link

When a path has more than three or four levels, collapse the middle and keep the first link and the last two items visible. Replace the collapsed items with BreadcrumbEllipsis inside its own BreadcrumbItem, so the separators still line up:

<BreadcrumbItem>
  <BreadcrumbEllipsis />
</BreadcrumbItem>
<BreadcrumbSeparator />

This keeps the first link, which tells the reader where the section starts, and the parent link, which lets them move up one level. The collapsed middle is still a path, so do not hide it entirely. The page lists a Dropdown example. If you put a menu on the ellipsis, read that example first, because the menu adds a second way to reach the hidden levels, and each one needs keyboard support.

This rule is ours, not the docs'. A path with four levels usually fits on a phone without collapsing. A path with six or more levels usually needs it.

Keep the path honestCopy Anchor Link

A breadcrumb has to match the real route. A link that drops the user two levels up, or a path that shows a page the user cannot reach from the parent, makes the component less useful than none. Build the items from the route data your router already has, not from a hand-typed list that drifts out of date.

For a settings page inside a project, the path should show the project and then the settings page. For a search results page, it should show the search and then the results, not a fake category the user never opened.

Write labels that fitCopy Anchor Link

Each link label should name a place, not a generic word. "Projects" and "Acme" tell the reader where they are. A "Home" link repeated on every page adds width and says little, so drop it when the logo already links home. Keep labels to one or two words where you can. Long project or document names are the usual cause of wrapping, so shorten them in the path and show the full name in the page heading.

Keep the path in the same order on every page. A reader who learns that the project sits second in the path should find it there on every screen. Changing the order between pages makes the path read like a different app, and the reader stops trusting the links.

Test the keyboard and the phoneCopy Anchor Link

Breadcrumbs are small, and they fail in small ways. Check these before you ship:

• Tab through the links in order. Each link should take focus, and the focus ring should show on the link, not on the separator.
• Press Enter on a link. The page should change to the route the link names.
• The current page should not be a link. Tab should skip it, and it should look like text.
• Open the collapsed ellipsis with the keyboard, if your version has a menu. Each hidden level should be reachable.
• On a 390px phone, check that the path wraps or collapses without pushing the page title out of view, and that no horizontal scroll appears.

Run the phone check last, after the labels are final. A label that wraps onto two lines can make the separators look misaligned.

Where OTF standsCopy Anchor Link

If you want a breadcrumb already built into a product, we cannot point you to one. We checked the SaaS Dashboard, Booking, Fitness and Arcade kit pages for breadcrumb terms, and none of them mentions a breadcrumb or a navigation path. So this article does not say any OTF kit ships one.

The pricing page lists the Full-stack kits at $99 each and the Everything Bundle at $149, both as one-time payments, and it offers a live demo before you buy. Check each kit's repository for the navigation it ships before you rely on any of them. For a page that sits under a path like this one, see the dialog and sheet guide, and for the accordion that often holds a settings form, see the accordion guide. If you are choosing a starting point for a product, the pricing page is the place to compare kits side by side: OTF pricing.

SourcesCopy Anchor Link

• shadcn/ui, Breadcrumb: https://ui.shadcn.com/docs/components/breadcrumb
• OTF pricing: otf-kit.dev/pricing