Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Home Icon

Breadcrumb with Select (Home Icon) for React

A breadcrumb trail with a home icon 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 home icon named?

The link to / holds only a HomeIcon at size-4, hidden from assistive tech, so the link carries aria-label="Home". Screen readers announce it as the Home link.

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