Breadcrumb

Vue breadcrumb navigation that shows the path to the current page with hierarchical links.

Show code

Features

Composable — Flexible slot-based layout with Breadcrumb.List, Breadcrumb.Item, Breadcrumb.Link, Breadcrumb.Page, and Breadcrumb.Separator
Accessible — Semantic navigation with aria-current on the current page
Customizable — Override separators, compose with menus, or collapse long paths with Breadcrumb.Ellipsis

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/breadcrumb.json

      
      npx shadcn-vue@latest add https://vuzeno.com/r/breadcrumb.json

      
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/breadcrumb.json

      
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/breadcrumb.json

Usage

      
      <script setup lang="ts">
import { Breadcrumb } from "@/components/ui/breadcrumb";
</script>

<template>
  <Breadcrumb.Root>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link href="/">
          Home
        </Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Breadcrumb.Link href="/components">
          Components
        </Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
      </Breadcrumb.Item>
    </Breadcrumb.List>
  </Breadcrumb.Root>
</template>

Composition

      
      Breadcrumb.Root
└── Breadcrumb.List
    ├── Breadcrumb.Item
    │   └── Breadcrumb.Link
    ├── Breadcrumb.Separator
    ├── Breadcrumb.Item
    │   └── Breadcrumb.Link
    ├── Breadcrumb.Separator
    └── Breadcrumb.Item
        └── Breadcrumb.Page

Examples

Custom separator

Use a custom icon or character inside Breadcrumb.Separator.

Show code

Compose Breadcrumb.Item with Menu to create a dropdown for nested navigation.

Show code

Collapsed

Use Breadcrumb.Ellipsis to collapse intermediate path segments.

Show code

API

Part	Description
`Breadcrumb.Root`	Root `nav` element with `aria-label="breadcrumb"`
`Breadcrumb.List`	Ordered list of breadcrumb items
`Breadcrumb.Item`	List item wrapping a link or page label
`Breadcrumb.Link`	Navigable link. Supports `as-child` for router links
`Breadcrumb.Page`	Current page label with `aria-current="page"`
`Breadcrumb.Separator`	Visual separator between items. Defaults to a chevron icon
`Breadcrumb.Ellipsis`	Collapsed path indicator with screen-reader text

Badge Button