Breadcrumb with Dropdown

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.

Breadcrumb with Dropdown preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-2.json

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-2.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-2.json

bunx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-2.json

Related Components

FAQ