Skip to content

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

Free

Breadcrumb with Dropdown (Standard) for Vue

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

UI library: Ark UI

The trail reads Home, then a folder button, then Components, then Breadcrumb as the current page. The folder opens Documentation, Themes, and GitHub. The button is named Show sections.

Use it when the collapsed levels must stay reachable. An ellipsis is enough if they can be dropped. Sibling pages that are one value fit a Select. In Vue, Ark UI does not fill the menu from the route.

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="true"><a href="/">Home</a></BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <Menu :positioning='{ placement: "bottom-start" }'>
        <MenuTrigger :asChild="true">
          <button aria-label="Show sections" class="flex items-center gap-1" type="button">
            <FolderIcon aria-hidden="true" class="size-4" />
          </button>
        </MenuTrigger>
        <MenuContent>
          <MenuGroup>
            <MenuItem value="documentation">Documentation</MenuItem>
            <MenuItem value="themes">Themes</MenuItem>
            <MenuItem value="github">GitHub</MenuItem>
          </MenuGroup>
        </MenuContent>
      </Menu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink :asChild="true">
        <a href="/components">Components</a>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

FAQ

How is the menu built?

Menu wraps a MenuTrigger and a MenuContent with three MenuItems, each with a value. positioning with placement: "bottom-start" opens it under the folder, aligned to its start.

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 as-child, and the demo puts an anchor inside. Put a RouterLink there instead.

API Reference

Breadcrumb

Sets asChild. The rest is on the Breadcrumb page.

Menu

Sets positioning="{ placement: bottom-start }", asChild, value="documentation", value="themes" and value="github". The rest is on the Menu page.

All 14 breadcrumb examples