{
  "id": 14086945,
  "title": "shadcn ships an ellipsis for long breadcrumbs, so plan the collapsed middle",
  "url": "https://urgent.news/2026/10/13/shadcn-ships-an-ellipsis-for-long-breadcrumbs-so-plan-the-collapsed",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-13T01:35:02.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/davekurian/shadcn-ships-an-ellipsis-for-long-breadcrumbs-so-plan-the-collapsed-middle-4oao"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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 ,…",
  "key_points": [
    "shadcn breadcrumb component includes BreadcrumbEllipsis",
    "Displays collapsed middle section for long paths",
    "Import from same file as other breadcrumb components"
  ],
  "editors_take": "Adding a dedicated ellipsis component allows developers to maintain clear navigational hierarchies on mobile devices by preventing long resource paths from breaking the user interface layout.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}