Breadcrumb

<nav aria-label="breadcrumb"> around an ol.breadcrumb. Current page uses aria-current="page" and is not a link. The separator is .breadcrumb-sep — a slash, or the chevron used in the dashboard block. Paste the markup first. The chevron SVG is the piece worth wrapping — copy src/components/ui/BreadcrumbSep.svelte.

Slash

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li><a href="/">Home</a></li>
		<li class="breadcrumb-sep" aria-hidden="true">/</li>
		<li><a href="/">Library</a></li>
		<li class="breadcrumb-sep" aria-hidden="true">/</li>
		<li aria-current="page">Data</li>
	</ol>
</nav>

Chevron

Same mark as the dashboard header. The preview is plain HTML.

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li><a href="/">Build Your Application</a></li>
		<li class="breadcrumb-sep" aria-hidden="true">
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
				<path d="m9 6 6 6-6 6"></path>
			</svg>
		</li>
		<li aria-current="page">Dashboard</li>
	</ol>
</nav>

Same chevron as an import from src/components/ui/BreadcrumbSep.svelte:

<script>
	import BreadcrumbSep from './ui/BreadcrumbSep.svelte';
</script>

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li><a href="/">Build Your Application</a></li>
		<BreadcrumbSep />
		<li aria-current="page">Dashboard</li>
	</ol>
</nav>