Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Home Icon

Breadcrumb with Dropdown (Home Icon) for React

A breadcrumb trail with a home icon 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. The home icon, 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 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.

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