Breadcrumbs

<script lang="ts">
  import { Breadcrumbs } from 'kumo-svelte';
  import { House } from 'phosphor-svelte';
</script>

<Breadcrumbs>
  <Breadcrumbs.Link href="#" icon={House}>Home</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Current>Current Project</Breadcrumbs.Current>
</Breadcrumbs>

Installation

Barrel

import { Breadcrumbs } from 'kumo-svelte';

Granular

import { Breadcrumbs } from 'kumo-svelte/components/breadcrumbs';

Usage

<script lang="ts">
  import { Breadcrumbs } from 'kumo-svelte';
</script>

<Breadcrumbs>
  <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
</Breadcrumbs>

Examples

Basic

<script lang="ts">
  import { Breadcrumbs } from 'kumo-svelte';
</script>

<Breadcrumbs>
  <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
</Breadcrumbs>

Loading

<script lang="ts">
  import { Breadcrumbs } from 'kumo-svelte';
  import { House } from 'phosphor-svelte';
</script>

<Breadcrumbs>
  <Breadcrumbs.Link href="#" icon={House}>Home</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Current loading />
</Breadcrumbs>

Root

<script lang="ts">
  import { Breadcrumbs } from 'kumo-svelte';
  import { House } from 'phosphor-svelte';
</script>

<Breadcrumbs>
  <Breadcrumbs.Current icon={House}>Worker Analytics</Breadcrumbs.Current>
</Breadcrumbs>

Clipboard

<script lang="ts">
  import { Breadcrumbs } from 'kumo-svelte';
</script>

<Breadcrumbs>
  <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
  <Breadcrumbs.Clipboard text="#" />
</Breadcrumbs>

API Reference

Prop	Type	Default	Description
size	`'sm' \| 'base'`	`"base"`	Size of the breadcrumbs.
children	`Snippet`	-	Breadcrumbs.Link, Breadcrumbs.Separator, Breadcrumbs.Current, and Breadcrumbs.Clipboard children.
class	`string`	-	Additional classes merged onto the nav element.

Breadcrumbs.Link

Prop	Type	Default	Description
href *	`string`	-	Destination URL.
icon	`Component`	-	Icon component rendered before the label.

Breadcrumbs.Current

Prop	Type	Default	Description
icon	`Component`	-	Icon component rendered before the label.
loading	`boolean`	`false`	Shows a skeleton placeholder instead of the label.

Breadcrumbs.Separator

Prop	Type	Default	Description
No component-specific props. Accepts standard HTML attributes.

Breadcrumbs.Clipboard

Prop	Type	Default	Description
text *	`string`	-	Text copied to the clipboard.