Skip to content

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

Free

Breadcrumb with Select (Home Icon) for React

A breadcrumb with a home icon, a select that starts on Components, and Breadcrumb as the current page. The select does not navigate.

The root is a home icon, named Home for screen readers. A select lists Documentation, Components, and Themes, and it starts on Components. Breadcrumb is the current page. Choosing an option does not change the page.

Use it when the root is an icon and a sibling section should switch in place. Send people onward yourself if the option is a URL. A menu of links fits a Dropdown Menu. In React, Base UI does not change the page.

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>
      <Select defaultValue="components" items={sections}>
        <SelectTrigger aria-label="Section" className="w-auto" size="sm">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {sections.map((section) => (
              <SelectItem key={section.value} value={section.value}>
                {section.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

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.

API Reference

Breadcrumb

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

Select

Sets defaultValue="components", items={sections}, aria-label="Section", size="sm" and value={section.value}. The rest is on the Select page.

All 14 breadcrumb examples