createBreadcrumbs
A composable that extends createSingle for breadcrumb navigation with automatic path truncation.
Usage
The createBreadcrumbs composable manages an ordered path of items. When you select an earlier item, everything after it is removed. Use values() to iterate the current trail for rendering.
Context / DI
Use createBreadcrumbsContext to share a breadcrumbs instance across a component tree:
import { createBreadcrumbsContext } from '@vuetify/v0'
export const [useBreadcrumbs, provideBreadcrumbs, breadcrumbs] =
createBreadcrumbsContext({ namespace: 'my:breadcrumbs' })
// In parent component
provideBreadcrumbs()
// In child component
const nav = useBreadcrumbs()
nav.register({ text: 'Settings' })Architecture
createBreadcrumbs extends createSingle with path truncation and derived navigation state:
The Breadcrumbs component consumes createBreadcrumbs as its backing model, similar to how Tabs.Root uses createStep.
Reactivity
Breadcrumb state is always reactive. All derived properties update automatically when items are registered, unregistered, or navigated.
| Property/Method | Reactive | Notes |
|---|---|---|
depth | Ref — count of registered items | |
isRoot | Ref — depth <= 1 | |
isEmpty | Ref — depth === 0 | |
selectedId | Computed — current (last) item ID | |
selectedItem | Computed — current item ticket | |
selectedValue | Computed — current item value | |
selectedIndex | Computed — current item position |
Depth tracking Use depth, isRoot, and isEmpty to conditionally render navigation controls like a “Back” button or hide the breadcrumb trail when at the root level.