React Breadcrumb with Ellipsis
A breadcrumb navigation with home icon and ellipsis to collapse middle paths in deep hierarchies
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Deep navigation paths get cramped—ellipsis keeps them manageable. This React breadcrumb uses shadcn/ui's BreadcrumbEllipsis component with a Home icon for the root, collapsing middle segments in long navigation trails. Built on Radix UI, the pattern maintains context while conserving space. Perfect for file browsers with deep folder structures, documentation sites with nested sections, e-commerce category trees, or any hierarchical navigation where showing every level would overflow—users see where they are without visual clutter.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-1.jsonRelated patterns you will also like
Breadcrumb with Dropdown
Expandable collapsed navigation
Standard Breadcrumb Ellipsis
Text-based home without icon
Breadcrumb with Icons
Icons throughout navigation path
Breadcrumb with Border
Contained breadcrumb navigation
Pagination
Page-based navigation
File Tree
Hierarchical file navigation