React Breadcrumb with Select
A breadcrumb navigation with home icon and inline select dropdown for switching between sibling sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Breadcrumbs that let you pivot—selects turn navigation into switchers. This React breadcrumb embeds shadcn/ui's Select component within breadcrumb navigation, using a Home icon for root and select triggers for switchable segments. Built on Radix UI with compact SelectTrigger styling (h-auto w-auto), the pattern allows lateral navigation without leaving the current page depth. Perfect for multi-tenant apps switching between accounts, documentation switching between versions, e-commerce switching between categories at same level, or any navigation where users frequently jump between siblings—combines location awareness with quick switching.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-7.jsonRelated patterns you will also like
Breadcrumb with Dropdown
DropdownMenu-based expandable navigation
Standard Breadcrumb Select
Text-based home with select
Select Component
Standard select dropdown
Breadcrumb with Ellipsis
Collapsed breadcrumb navigation
Version Switcher
Documentation version selection
Account Switcher
Multi-tenant switching