Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Breadcrumb for Vue

Show where the current page sits with a short trail of parent links, ending in plain text. For Vue with Ark UI, when people should step back to a parent page.

Framework
UI library

Links for the parent pages, with this page at the end.

Use it when the screen has a parent worth returning to, such as a product inside a category. A Navigation Menu is the site-wide nav, not this path. In Vue, Ark UI marks the current page so the last item is text, not a link.

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

<script setup lang="ts">
import {
  Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink,
  BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Menu, MenuContent, MenuGroup, MenuItem, MenuTrigger,
} from "@/components/ui/menu";
</script>

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <a href="#">Home</a>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <Menu positioning={{ placement: "bottom-start" }}>
        <MenuTrigger asChild>
          <Button size="icon-sm" variant="ghost">
            <BreadcrumbEllipsis />
            <span className="sr-only">Toggle menu</span>
          </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>
        <a href="#">Components</a>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Accessibility

Enter
Activate the focused control.
Space
Activate the focused control.
Arrow Down
Move down.
Arrow Up
Move up.
Arrow Left
Move left.
Arrow Right
Move right.
Home
Go to the start.
End
Go to the end.

Demos

Basic

Home, Components, and the current page sit in a row with the default separator, and the first two are links. The last is BreadcrumbPage, so it is text with the current-page state and not something you can activate. Use this shape whenever the trail is short enough to show in full. The ellipsis and the dropdown are for trails that do not fit.

Preview width

Separator

A dot replaces the default chevron between crumbs. The icon is the separator's child, and it is hidden from assistive tech because the list already conveys the order. Swap the mark when the product has its own trail glyph. Use one style for the whole site, or the path starts to look assembled from different kits.

Preview width

Components is a button that opens a menu of Documentation, Themes, and GitHub, sitting between Home and the current page. The menu is an ordinary menu inside a breadcrumb item, not a special breadcrumb part. Use it when a middle level has siblings the person might jump to, such as other sections under the same parent. If there is only one place to go, a plain link is enough.

Preview width

Ellipsis

The middle of a long trail collapses to a horizontal ellipsis between Home and Components. It is a visual stand-in, not a control, so nothing opens when it is activated. Use it when you must show the start and the end but the middle levels do not fit. If those middle levels matter, put them in a menu on the ellipsis instead of leaving a dead mark.

Preview width

The crumbs are the router's link, so client navigation stays inside the app instead of a full load. Home and Components both point at real routes. Do this on any trail in an app with its own router. A plain anchor is fine when a full page load is acceptable, and the current page stays text either way.

Preview width

Rtl

The trail is Arabic: a home link, a middle item, and the current page, with dots between them. The middle item opens a menu of sibling pages, aligned to the end of the line. dir on the breadcrumb is what reverses the order. The current page stays plain text, same as in the other trails.

Preview width

FAQ

How do I mark the current page in a Breadcrumb?

End the trail with BreadcrumbPage instead of a link: it renders plain text with aria-current="page", so screen readers announce where you are. A link to the page you're already on adds nothing.

How do I change the Breadcrumb separator to a slash?

Put your own content inside BreadcrumbSeparator, such as a slash or a dot icon; it shows a chevron when empty. The Separator demo uses a slash.

How do I shorten a long Breadcrumb on mobile?

Collapse the middle items into a BreadcrumbEllipsis, or into a Dropdown Menu of the hidden levels, and keep the first item and the current page visible. The Ellipsis and Dropdown demos show both.

Do I need a Breadcrumb if my page has a back button?

Usually yes: a back button follows the reader's history, while a breadcrumb shows where the page sits in your site. Someone who arrives from a search result has no history to go back to, but can still climb the trail.

Does the Ark UI Breadcrumb support right-to-left languages?

Yes. In a right-to-left layout the trail reads from the right, as the RTL demo shows. Check that your separator points the way the trail reads; a slash reads the same in both directions.

Is the Breadcrumb good for SEO?

It helps people and crawlers understand your site's hierarchy, and the links pass context between pages. For breadcrumb rich results in search, also add BreadcrumbList structured data in JSON-LD; the component renders the visible trail, not the schema.

How do I install the Breadcrumb in Vue?

Run the command in the Installation section above: it adds breadcrumb to your components/ui folder. React and Solid use the shadcn CLI, Vue uses shadcn-vue and Svelte uses shadcn-svelte, each after its one-time setup.

API Reference

Breadcrumb

<nav> data-slot="breadcrumb"

PropType
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

class?string

Merged with the part's classes.

BreadcrumbList

<ol> data-slot="breadcrumb-list"

PropType
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

class?string

Merged with the part's classes.

BreadcrumbItem

<li> data-slot="breadcrumb-item"

PropType
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

class?string

Merged with the part's classes.

BreadcrumbLink

<a> data-slot="breadcrumb-link"

PropType
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

class?string

Merged with the part's classes.

BreadcrumbPage

<span> data-slot="breadcrumb-page"

PropType
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

class?string

Merged with the part's classes.

BreadcrumbSeparator

<li> data-slot="breadcrumb-separator"

PropType
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

class?string

Merged with the part's classes.

BreadcrumbEllipsis

<span> data-slot="breadcrumb-ellipsis"

PropType
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

class?string

Merged with the part's classes.

With other components

All 100 components14 breadcrumb examples