Breadcrumbs | getdom.studio

Resource paths

Long paths collapse in the middle

maxItems preserves the beginning and current end of a path. The ellipsis is an accessible disclosure control and selecting an item emits its untouched application record.

Application destination: API credentials

ProjectNavigation.vuevue

Routing

Vue Router destinations

Items with to render as RouterLink destinations; href renders a native anchor; destination-free items emit navigate for application-owned routing.

RouterBreadcrumbs.vuevue

Playground

Path presentation

Breadcrumbs playground

Adjust collapse limits, separators, density, and current-location behavior.

Playground.vuevue

vue

<script setup>
import { reactive } from 'vue';
import { DomBreadcrumbs } from '@getdom/studio/vue';

const data = reactive({
	  "items": [
	    {
	      "key": "root",
	      "label": "Workspace"
	    },
	    {
	      "key": "projects",
	      "label": "Projects"
	    },
	    {
	      "key": "northstar",
	      "label": "Northstar"
	    },
	    {
	      "key": "settings",
	      "label": "Settings"
	    },
	    {
	      "key": "api",
	      "label": "API credentials",
	      "current": true
	    }
	  ],
	  "maxItems": 4,
	  "currentAsLink": false,
	  "separator": "chevron",
	  "size": "md",
	  "ariaLabel": "Breadcrumb",
	  "collapseLabel": "Show hidden breadcrumbs"
	});
</script>

<template>
	<DomBreadcrumbs
		v-bind="data"
	/>
</template>

Architecture

Destinations stay application-owned

DomBreadcrumbs supplies navigation semantics, collapsing, focus styles, and aria-current. It does not infer a route hierarchy or fetch ancestors.

Pass a Vue Router to, native href, or listen to navigate. The final item is current by default unless another item explicitly sets current.

Reference

Props

Control props

Name	Type	TS	Default	Description
`items`	array	Array<BreadcrumbItem `type BreadcrumbItem = { key?: string \| number; // Stable item key. label: string; // Human-readable location label. to?: string \| Record<string, unknown>; // Vue Router destination. href?: string; // Native link destination. current?: boolean; // Mark this item as the current location. disabled?: boolean; // Render the item without navigation. };` >	[]	Ordered application-owned breadcrumb records.
`maxItems`	number	number	0	Maximum visible entries before the middle path collapses. Use 0 to show every item.
`currentAsLink`	boolean	boolean	false	Keep the current location interactive when it has a destination.
`separator`	'chevron' \| 'slash'	string	'chevron'	Built-in separator treatment.
`size`	'sm' \| 'md'	string	'md'	Text and spacing density.
`ariaLabel`	string	string	'Breadcrumb'	Accessible label for the navigation landmark.
`collapseLabel`	string	string	'Show hidden breadcrumbs'	Accessible label for the collapsed-path control.

Auto-generated from Breadcrumbs.props and inline _edit hints.

Events

Name	Payload	Description
@navigate	BreadcrumbNavigatePayload	Fired whenever an interactive breadcrumb is selected. Link navigation continues normally.
@expand	BreadcrumbItem[]	Fired after a collapsed middle path is revealed.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Slots

Name	Scope	Description
#item	BreadcrumbSlotPayload	Replace an item label inside its semantic link, button, or current-location element.
#separator	{ previous, next, index }	Replace the separator before each item after the first.
#collapsed	{ items, count, expand }	Replace the control used to reveal a collapsed middle path.