Breadcrumb

A breadcrumb trail showing the path to the current page, with clickable ancestors for navigating back up.

Usage

Pass the trail as items . Every item except the last renders as a brand-colored link; the last renders as the current page (medium weight, aria-current="page" ). Clicking an ancestor fires on:navigate with the clicked item’s index. The host owns the actual navigation (e.g. popping its drill-down stack back to that level).

<script>
	import { Breadcrumb } from 'deskblocks';

	let items = [
		{ id: 'overview', label: 'Account overview' },
		{ id: 'tickets', label: 'Open tickets' },
		{ id: 'detail', label: 'Ticket #4831' }
	];

	function navigate(e) {
		items = items.slice(0, e.detail.index + 1);
	}
</script>

<Breadcrumb {items} on:navigate={navigate} />

Single crumb

With one item, the trail is just the current page, with no separators and nothing clickable.

<Breadcrumb items={[{ label: 'Account overview' }]} />

Props

Events

• on:navigate fires when an ancestor crumb is clicked; event.detail is { index, id, item } .