Skip to content

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

Free

Breadcrumb with Select (Home Icon) for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not change the page.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink asChild={props => <a {...props()} aria-label="Home" href="/">
            <HomeIcon aria-hidden="true" class="size-4" />
          </a>} />
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <Select collection={collection} defaultValue={["components"]}>
          <SelectTrigger aria-label="Section" class="w-auto" size="sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {collection.items.map(item => <SelectItem item={item}>
                  {item.label}
                </SelectItem>)}
            </SelectGroup>
          </SelectContent>
        </Select>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>

FAQ

How does the select start on Components?

The options come from createListCollection, passed as collection, and defaultValue is ["components"]: the value is an array.

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. Read details.value in onValueChange and 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 asChild, and the demo puts an anchor inside. Spread the props it gives you onto your router's link.

API Reference

Breadcrumb

Sets asChild and props. The rest is on the Breadcrumb page.

Select

Sets collection={collection}, defaultValue={["components"]}, aria-label="Section", size="sm" and item={item}. The rest is on the Select page.

All 14 breadcrumb examples