React Breadcrumb with Ellipsis
A breadcrumb navigation with text-based Home link and ellipsis to collapse middle paths in deep hierarchies
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-1.jsonRelated patterns you will also like
Breadcrumb with Dropdown
Expandable collapsed navigation
Home Icon Breadcrumb Ellipsis
Icon-based home with ellipsis
Breadcrumb with Icons
Icons throughout navigation path
Breadcrumb with Border
Contained breadcrumb navigation
Pagination
Page-based navigation
File Tree
Hierarchical file navigation