Shadcn.io is not affiliated with official shadcn/ui
Breadcrumb with Ellipsis
A breadcrumb navigation with home icon and ellipsis to collapse middle paths in deep hierarchies
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.
Breadcrumb with Ellipsis preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.