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 covers 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 ,…
shadcn, a breadcrumb navigation component, includes a BreadcrumbEllipsis for displaying a collapsed middle section when a path becomes too long for phone screens. The page documents this component as part of the breadcrumb hierarchy, which displays the path to the current resource using a series of links. To use the BreadcrumbEllipsis, import it from the same file as the other breadcrumb components.
It displays an ellipsis indicator for collapsed breadcrumb items. The current page in the breadcrumb, which is the last item, is not a link and appears non-clickable. The BreadcrumbPage component shows the current page and is separated from other items using BreadcrumbSeparator. When building a path that ends on the current page, place a BreadcrumbSeparator between items but not after the last one.
The page provides examples of basic, custom separator, dropdown, collapsed, link component, and right-to-left layouts. It does not mention aria-current or link accessibility.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
