React Breadcrumb with Dropdown
A breadcrumb navigation with text-based Home link and dropdown menu to reveal collapsed segments
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text breadcrumbs with expandable dropdowns combine clarity with interactivity. This React breadcrumb combines shadcn/ui's DropdownMenu with text "Home" for root and Folder icon for expandable segments. Built on Radix UI, clicking the folder icon reveals collapsed navigation paths while maintaining explicit Home text. Perfect for content management systems with readable navigation, applications prioritizing text legibility over space savings, editorial platforms where Home text is clearer than icon, or any navigation where users benefit from explicit labels while accessing hidden intermediate levels—text provides clarity, dropdowns provide functionality.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-2.jsonRelated patterns you will also like
Breadcrumb with Ellipsis
Collapsed non-interactive breadcrumb
Home Icon Breadcrumb Dropdown
Icon-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