Breadcrumb with Select

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.

Breadcrumb with Select preview

Installation

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

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

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

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

Related Components

FAQ