Breadcrumb with Ellipsis

Text breadcrumbs with ellipsis balance readability and space—no icons needed. This React breadcrumb uses shadcn/ui's BreadcrumbEllipsis component with text "Home" for the root, collapsing middle segments in long navigation trails. Built on Radix UI, the pattern maintains full text legibility while conserving horizontal space. Perfect for content-heavy sites prioritizing readability, applications with accessibility-first design avoiding icon-only navigation, editorial platforms with text-focused aesthetics, or any hierarchical navigation where explicit text labels matter more than visual compactness—users read their location clearly without decoding icons.

Breadcrumb with Ellipsis preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-1.json

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-1.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-1.json

bunx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-1.json

Related Components

FAQ