Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Standard

Breadcrumb with Select (Standard) for React

A breadcrumb trail with a text Home link and an inline select for switching between sibling sections.

Framework
UI library

The middle crumb is a small Select set to Components, with Documentation and Themes beside it. People switch to a sibling section without going up a level. Use it for workspaces, versions or categories at the same depth.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the select start on Components?

defaultValue is components, and items lets SelectValue show its label.

How does the select fit in the line?

SelectTrigger takes size="sm", and the trigger is only as wide as its value, so it sits in the trail like a crumb.

How is the select named?

It has no visible label, so it carries aria-label="Section" and is announced as the Section select with its value.

Does picking an option change the page?

Not in the demo: the select is uncontrolled and nothing listens. onValueChange receives the new value; navigate there.

How is the trail announced?

Breadcrumb renders a nav labeled breadcrumb around an ordered list, so screen readers announce a breadcrumb landmark and the number of items. Home and Components are read as links.

How do the links go through my router?

BreadcrumbLink takes the link through render, as in render={<Link href="/" />} with the Next.js Link.

All 14 breadcrumb examples