Breadcrumbs | tcpsystems/ui

Examples

Three levels

Three levels.svelte

<script lang="ts">
	import Breadcrumbs from '@tcpsystems/ui/foundation/Breadcrumbs';
</script>

<Breadcrumbs items={[
	{ label: 'Projects', href: '#projects' },
	{ label: 'Search gateway', href: '#search-gateway' },
	{ label: 'Deployments' }
]} />

Deep

Deep.svelte

<script lang="ts">
	import Breadcrumbs from '@tcpsystems/ui/foundation/Breadcrumbs';
</script>

<Breadcrumbs items={[
	{ label: 'Invoices', href: '#invoices' },
	{ label: 'October 2026', href: '#october-2026' },
	{ label: 'INV-2041', href: '#inv-2041' },
	{ label: 'Line items' }
]} />

API

Import

import Breadcrumbs from '@tcpsystems/ui/foundation/Breadcrumbs';

Prop	Type	Default
`items`	`{ label: string; href?: string }[]`	none

Hook	Kind
`.tcp-breadcrumbs`	Root class