React Breadcrumb with Dropdown
A breadcrumb navigation with home icon and dropdown menu to reveal collapsed navigation segments
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Breadcrumb ellipsis that does something—dropdowns reveal the hidden middle. This React breadcrumb combines shadcn/ui's DropdownMenu with breadcrumb navigation, using a Home icon for root and Folder icon for expandable segments. Built on Radix UI, clicking the folder icon reveals collapsed navigation paths. Perfect for file managers with branching directories, documentation with multiple section paths, content hierarchies with alternative routes, or any navigation where users need access to hidden intermediate levels—provides full navigation without permanent visual clutter.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-2.jsonRelated patterns you will also like
Breadcrumb with Ellipsis
Collapsed non-interactive breadcrumb
Standard Breadcrumb Dropdown
Text-based home with dropdown
Breadcrumb with Select
Select-based navigation switching
Dropdown Menu
Standard dropdown component
Breadcrumb with Icons
Icons throughout navigation
Navigation Menu
Complex navigation patterns