Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Loading preview…
1<script lang="ts">
2 import * as Breadcrumb from "./index.js";
3</script>
4
5<Breadcrumb.Root>
6 <Breadcrumb.List>
7 <Breadcrumb.Item>
8 <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
9 </Breadcrumb.Item>
10 <Breadcrumb.Separator />
11 <Breadcrumb.Item>
12 <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
13 </Breadcrumb.Item>
14 <Breadcrumb.Separator />
15 <Breadcrumb.Item>
16 <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
17 </Breadcrumb.Item>
18 </Breadcrumb.List>
19</Breadcrumb.Root>
20Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/breadcrumb/index.ts
- ~/components/breadcrumb/breadcrumb.svelte
- ~/components/breadcrumb/breadcrumb-list.svelte
- ~/components/breadcrumb/breadcrumb-item.svelte
- ~/components/breadcrumb/breadcrumb-link.svelte
- ~/components/breadcrumb/breadcrumb-page.svelte
- ~/components/breadcrumb/breadcrumb-separator.svelte
- ~/components/breadcrumb/breadcrumb-ellipsis.svelte
Usage
Use breadcrumb to show hierarchical location. End with Breadcrumb.Page for the current item,
and insert Breadcrumb.Ellipsis when collapsing middle segments.
1<script lang="ts">
2 import * as Breadcrumb from '~/components/breadcrumb';
3</script>
4
5<Breadcrumb.Root>
6 <Breadcrumb.List>
7 <Breadcrumb.Item>
8 <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
9 </Breadcrumb.Item>
10 <Breadcrumb.Separator />
11 <Breadcrumb.Item>
12 <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
13 </Breadcrumb.Item>
14 <Breadcrumb.Separator />
15 <Breadcrumb.Item>
16 <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
17 </Breadcrumb.Item>
18 </Breadcrumb.List>
19</Breadcrumb.Root>