Overview
Breadcrumbs provides a responsive navigation trail that automatically handles overflow by showing an ellipsis indicator. It uses createBreadcrumbs composable with Group and Overflow contexts to determine which items fit in the available space.
Sub-Components
- Breadcrumbs.Root: Container that manages breadcrumb state and overflow
- Breadcrumbs.List: Semantic list wrapper with role=“list”
- Breadcrumbs.Item: Individual breadcrumb item with self-measurement
- Breadcrumbs.Link: Navigable breadcrumb link (anchor by default)
- Breadcrumbs.Page: Current page indicator with aria-current=“page”
- Breadcrumbs.Divider: Visual separator between items
- Breadcrumbs.Ellipsis: Indicator shown when items are truncated
Usage
<script setup lang="ts">
import { Breadcrumbs } from '@vuetify/v0'
</script>
<template>
<Breadcrumbs.Root>
<Breadcrumbs.List>
<Breadcrumbs.Item text="Home">
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Divider />
<Breadcrumbs.Ellipsis />
<Breadcrumbs.Item text="Products">
<Breadcrumbs.Link href="/products">Products</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Divider />
<Breadcrumbs.Item text="Shoes">
<Breadcrumbs.Page>Shoes</Breadcrumbs.Page>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Root>
</template>
Breadcrumbs.Root
Props
as
DOMElement | null
default:"'nav'"
The HTML element to render as
namespace
string
default:"'v0:breadcrumbs'"
Namespace for dependency injection
Default divider character/text
Default ellipsis character/text
Gap between items in pixels
Accessible label for the navigation landmark
Slot Props
Whether items are being truncated
Number of items that fit in available space
Total number of registered items
Current depth of the breadcrumb path
Navigate to a specific item
Attributes to bind to the root element
Breadcrumbs.List
Props
as
DOMElement | null
default:"'ol'"
The HTML element to render as
Breadcrumbs.Item
Props
as
DOMElement | null
default:"'li'"
The HTML element to render as
Text content for the item (used for accessibility)
Slot Props
Whether this item is currently visible
Attributes to bind to the item element
Breadcrumbs.Link
Props
as
DOMElement | null
default:"'a'"
The HTML element to render as
Breadcrumbs.Page
Props
as
DOMElement | null
default:"'span'"
The HTML element to render as
Slot Props
Attributes including aria-current=“page”
Breadcrumbs.Divider
Props
as
DOMElement | null
default:"'li'"
The HTML element to render as
Override the divider character from Root
Slot Props
The divider character to display
Breadcrumbs.Ellipsis
Props
as
DOMElement | null
default:"'li'"
The HTML element to render as
Override the ellipsis character from Root
Slot Props
The ellipsis character to display
Examples
Basic
With Overflow
Custom Divider
Custom Divider with SVG
With Slot Props
<template>
<Breadcrumbs.Root>
<Breadcrumbs.List>
<Breadcrumbs.Item text="Home">
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Divider />
<Breadcrumbs.Item text="Products">
<Breadcrumbs.Page>Products</Breadcrumbs.Page>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Root>
</template>
<template>
<Breadcrumbs.Root>
<Breadcrumbs.List>
<Breadcrumbs.Item text="Home">
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Divider />
<Breadcrumbs.Ellipsis />
<Breadcrumbs.Item text="Category">
<Breadcrumbs.Link href="/category">Category</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Divider />
<Breadcrumbs.Item text="Current">
<Breadcrumbs.Page>Current</Breadcrumbs.Page>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Root>
</template>
<template>
<Breadcrumbs.Root divider=">">
<Breadcrumbs.List>
<Breadcrumbs.Item text="Home">
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Divider />
<Breadcrumbs.Item text="Products">
<Breadcrumbs.Link href="/products">Products</Breadcrumbs.Link>
</Breadcrumbs.Item>
<!-- Override divider for specific separator -->
<Breadcrumbs.Divider divider="|" />
<Breadcrumbs.Item text="Shoes">
<Breadcrumbs.Page>Shoes</Breadcrumbs.Page>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Root>
</template>
<template>
<Breadcrumbs.Root>
<Breadcrumbs.List>
<Breadcrumbs.Item text="Home">
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Divider>
<svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</svg>
</Breadcrumbs.Divider>
<Breadcrumbs.Item text="Products">
<Breadcrumbs.Page>Products</Breadcrumbs.Page>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Root>
</template>
<template>
<Breadcrumbs.Root>
<template #default="{ isOverflowing, capacity, total }">
<div>Showing {{ capacity }} of {{ total }} items</div>
<div v-if="isOverflowing">Some items are hidden</div>
<Breadcrumbs.List>
<!-- items -->
</Breadcrumbs.List>
</template>
</Breadcrumbs.Root>
</template>
Accessibility
- Root renders as
<nav> by default with aria-label="Breadcrumb"
- List has
role="list" for proper semantic structure
- Page has
aria-current="page" to indicate current location
- Divider and Ellipsis have
aria-hidden="true" as they are decorative
<template>
<Breadcrumbs.Root label="Site navigation">
<Breadcrumbs.List>
<!-- items -->
</Breadcrumbs.List>
</Breadcrumbs.Root>
</template>
