Composables
useBreadcrumb
Builds and mutates a reactive breadcrumb trail from the current route or manually pushed items.
useBreadcrumb
Reactive breadcrumb trail composable. Automatically derives an initial trail from the current Nuxt route, and exposes push, pop, and replace helpers for dynamic overrides — useful when a page loads a record by ID and you want to show the record's label rather than the raw route segment. Consumed by the XABreadcrumb layout component.
Usage
const { items, push, pop, replace } = useBreadcrumb()
Returns
| Key | Type | Description |
|---|---|---|
items | Ref<BreadcrumbItem[]> | Reactive ordered array of { label, to? } breadcrumb items. |
push | (item: BreadcrumbItem) => void | Appends a new item to the end of the trail. |
pop | () => BreadcrumbItem | undefined | Removes and returns the last item. |
replace | (items: BreadcrumbItem[]) => void | Replaces the entire trail with a new array. |
Example
// pages/users/[id].vue
const route = useRoute()
const { push } = useBreadcrumb()
const { data: user } = await useXFetch<User>(`/api/users/${route.params.id}`)
// Replace the raw "[id]" segment with the user's name
push({ label: user.value?.name ?? route.params.id, to: route.fullPath })
AI Context
composable: useBreadcrumb
package: "@xenterprises/nuxt-x-app"
use-when: >
Any detail or nested page that needs to show a breadcrumb trail — especially
when a route segment is a UUID or slug that should be displayed as a human-
readable label after the record loads.
pairs-with: XABreadcrumb, XALayoutHeader, useAppLayout