React Breadcrumb with Select
A breadcrumb navigation with text-based Home link and inline select for switching between sibling sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text breadcrumbs with selects combine readable navigation with section switching. This React breadcrumb embeds shadcn/ui's Select component with text "Home" 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 with clear text labels. Perfect for documentation switching between text-labeled versions, multi-tenant apps with readable account names, e-commerce with clear category labels for switching, or any navigation where users benefit from explicit text while frequently jumping between siblings—text ensures clarity, selects enable switching.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-7.jsonRelated patterns you will also like
Breadcrumb with Dropdown
DropdownMenu-based navigation
Home Icon Breadcrumb Select
Icon-based home with select
Select Component
Standard select dropdown
Breadcrumb with Ellipsis
Collapsed text breadcrumb
Version Switcher
Documentation version selection
Account Switcher
Multi-tenant switching