Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Related 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