Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Breadcrumb with Dropdown (Home Icon) for React

A breadcrumb with a home icon, a folder menu of Documentation, Themes, and GitHub, then Components and Breadcrumb.

The root is a home icon, named Home for screen readers. A folder button opens Documentation, Themes, and GitHub. Components and Breadcrumb, the current page, follow it.

Use it when the root is an icon and the hidden levels must still open. An ellipsis is quieter if those levels can go. A single current section fits a Select. In React, Base UI does not list the sections.

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

Anatomy

Breadcrumb anatomy: link, ellipsis, separator, item, page

Usage

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink aria-label="Home" render={<Link href="/" />}>
        <HomeIcon aria-hidden="true" className="size-4" />
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <DropdownMenu>
        <DropdownMenuTrigger
          aria-label="Show sections"
          render={
            <button className="flex items-center gap-1" type="button" />
          }
        >
          <FolderIcon aria-hidden="true" className="size-4" />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuGroup>
            <DropdownMenuItem>Documentation</DropdownMenuItem>
            <DropdownMenuItem>Themes</DropdownMenuItem>
            <DropdownMenuItem>GitHub</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/components" />}>
        Components
{/* The rest of the file is under Installation. */}

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.

API Reference

Breadcrumb

No extra props in this demo. The rest is on the Breadcrumb page.

Dropdown Menu

Sets align="start". The rest is on the Dropdown Menu page.

All 14 breadcrumb examples