Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Loading preview…

Installation

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>