Breadcrumbs
breadcrumbs.svelteA breadcrumb trail of named links separated by a chevron.
Demo
Usage
001 <script lang="ts">
002 import BreadCrumbs from '$lib/components/breadcrumbs.svelte';
003 </script>
004
005 <BreadCrumbs
006 items={[{ name: 'home', url: '#' }, { name: 'projects', url: '#' }, { name: 'svtui' }]}
007 />
008
breadcrumbs.svelte
001 <script lang="ts" module>
002 export type BreadcrumbItem = {
003 name: string;
004 url?: string;
005 };
006
007 export type BreadCrumbsProps = {
008 items: BreadcrumbItem[];
009 };
010 </script>
011
012 <script lang="ts">
013 let { items }: BreadCrumbsProps = $props();
014 </script>
015
016 <nav aria-label="breadcrumb" class="root">
017 {#each items as item, i (i)}
018 <span class="line">
019 {#if i === items.length - 1}
020 <span class="current">{item.name}</span>
021 {:else if item.url}
022 <a class="link" href={item.url}>{item.name}</a>
023 {:else}
024 <span class="link">{item.name}</span>
025 {/if}
026 {#if i < items.length - 1}
027 <span class="symbol" aria-hidden="true">❯</span>
028 {/if}
029 </span>
030 {/each}
031 </nav>
032
033 <style>
034 .root {
035 display: inline-block;
036 }
037
038 .line {
039 display: inline-block;
040 line-height: var(--line);
041 }
042
043 .link {
044 display: inline-block;
045 color: var(--text-primary);
046 outline: 0;
047 border: 0;
048 text-decoration: none;
049 background: var(--border-default);
050 }
051
052 a.link:hover,
053 a.link:focus-visible {
054 background: var(--focus-ring);
055 }
056
057 a.link:focus-visible {
058 outline: none;
059 }
060
061 .current {
062 display: inline-block;
063 color: var(--text-primary);
064 }
065
066 .symbol {
067 min-width: 1ch;
068 display: inline-block;
069 margin: 0 1ch;
070 }
071 </style>
072