<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import HouseIcon from "phosphor-svelte/lib/HouseIcon";
</script>

<Breadcrumbs.Root>
  {#snippet mobile()}
    <Breadcrumbs.Ellipsis />
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Current Project</Breadcrumbs.Current>
  {/snippet}

  <Breadcrumbs.Link href="#">
    {#snippet icon()}
      <HouseIcon size={16} />
    {/snippet}

    Home
  </Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
  <Breadcrumbs.Separator />
  <Breadcrumbs.Current>Current Project</Breadcrumbs.Current>
</Breadcrumbs.Root>

Import

import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";

Usage

<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
</script>

<Breadcrumbs.Root>
  {#snippet mobile()}
    <Breadcrumbs.Ellipsis />
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
  {/snippet}

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

Examples

Basic

<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
</script>

<Breadcrumbs.Root>
  {#snippet mobile()}
    <Breadcrumbs.Ellipsis />
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
  {/snippet}

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

Loading

<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import HouseIcon from "phosphor-svelte/lib/HouseIcon";
</script>

<Breadcrumbs.Root>
  {#snippet mobile()}
    <Breadcrumbs.Ellipsis />
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current loading />
  {/snippet}

  <Breadcrumbs.Link href="#">
    {#snippet icon()}
      <HouseIcon size={16} />
    {/snippet}

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

Root

<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import HouseIcon from "phosphor-svelte/lib/HouseIcon";
</script>

<Breadcrumbs.Root>
  <Breadcrumbs.Current>
    {#snippet icon()}
      <HouseIcon size={16} />
    {/snippet}

    Worker Analytics
  </Breadcrumbs.Current>
</Breadcrumbs.Root>

Clipboard

<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
</script>

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

API Reference

Prop	Type	Default
children	`Snippet`	—
class	`string`	—
mobile	`Snippet`	—
size	`KumoBreadcrumbsSize`	`KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size`

Prop	Type	Default
class	`string`	—
copiedLabel	`string`	`"Copied"`
label	`string`	`"Copy"`
onCopy	`() => void`	—
text*	`string`	—

Prop	Type	Default
children	`Snippet`	—
class	`string`	—
icon	`Snippet`	—
loading	`boolean`	`false`

Prop	Type	Default
class	`string`	—

Prop	Type	Default
children	`Snippet`	—
class	`string`	—
icon	`Snippet`	—

Prop	Type	Default
children	`Snippet`	—
class	`string`	—