Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/breadcrumb.jsonUsage
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item><Breadcrumb.Ellipsis /></Breadcrumb.Item>
<Breadcrumb.Item><Breadcrumb.Link href="/docs">Components</Breadcrumb.Link></Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item><Breadcrumb.Page>Breadcrumb</Breadcrumb.Page></Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>API Reference
This is a custom Svelte component, not a Shards wrapper.
Breadcrumb.Root
Root navigation container with aria-label="breadcrumb".
Breadcrumb.List
Ordered list container for breadcrumb items.
Breadcrumb.Item
Individual breadcrumb item container.
Breadcrumb.Link
Link element for navigable breadcrumb items. Use as when another native element is required.
| Prop | Type | Default | Description |
|---|---|---|---|
as | keyof HTMLElementTagNameMap | "a" | Native element to render |
Breadcrumb.Page
Non-interactive element representing the current page. Includes aria-current="page".
Breadcrumb.Separator
Separator between breadcrumb items. Defaults to a Hugeicons chevron and accepts custom children.
Breadcrumb.Ellipsis
Ellipsis indicator for collapsed breadcrumb items.