Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Standard

Breadcrumb with Dropdown (Standard) for React

A breadcrumb trail with a text Home link and a folder menu that lists the collapsed sections of the path.

Framework
UI library

The middle of the trail is a folder button that opens a Dropdown Menu with Documentation, Themes and GitHub. Home, Components and the current page stay in line around it. Use it where an ellipsis would hide levels people still need to reach.

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 is the menu built?

DropdownMenu wraps a DropdownMenuTrigger and a DropdownMenuContent with align="start" and three DropdownMenuItems.

How is the folder button named?

Its only child is a FolderIcon, hidden from assistive tech, so the button carries aria-label="Show sections". Without it the button would have no name.

Do the menu items navigate?

Not in the demo: they are plain items. Make each one a link to its section, or handle the selection and route from 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.

Which separator sits between the crumbs?

An empty BreadcrumbSeparator renders a chevron, hidden from assistive tech.

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