28 lines
726 B
Svelte
28 lines
726 B
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
|
|
import * as Breadcrumb from '$lib/components/ui/breadcrumb';
|
|
|
|
$: segments = $page.url.pathname.slice(1).split('/');
|
|
$: breadcrumb = segments.map((segment, index) => {
|
|
return {
|
|
name: segment.charAt(0).toUpperCase() + segment.slice(1),
|
|
href: '/' + segments.slice(0, index + 1).join('/')
|
|
};
|
|
}) as { name: string; href: string }[];
|
|
</script>
|
|
|
|
<Breadcrumb.Root>
|
|
<Breadcrumb.List>
|
|
{#each breadcrumb as { name, href }, index}
|
|
<Breadcrumb.Item>
|
|
<Breadcrumb.Link {href}>
|
|
{name}
|
|
</Breadcrumb.Link>
|
|
</Breadcrumb.Item>
|
|
{#if index < breadcrumb.length - 1}
|
|
<Breadcrumb.Separator />
|
|
{/if}
|
|
{/each}
|
|
</Breadcrumb.List>
|
|
</Breadcrumb.Root>
|