/ breadcrumb

Breadcrumb

@kumiki/headless/breadcrumb

Planned Svelte 5 attachments for Breadcrumb — nav[aria-label] + ordered-list semantics + aria-current="page" for the leaf item.

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Attach to your own DOM

<script lang="ts">
  import { createBreadcrumb } from '@kumiki/headless/breadcrumb';
  const ctl = createBreadcrumb({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Install

pnpm add @kumiki/components

Trail with current page

<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link current>Breadcrumb</Breadcrumb.Link>
  </Breadcrumb.Item>
</Breadcrumb.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Hierarchical navigation

<script lang="ts">
  import { Tailwind as Breadcrumb } from '@kumiki/atelier/breadcrumb';
</script>

<Breadcrumb.Root aria-label="Breadcrumb">
  <Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item><Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link></Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item><Breadcrumb.Link current>Atelier</Breadcrumb.Link></Breadcrumb.Item>
</Breadcrumb.Root>

This component, layer by layer

Keyboard

Test discipline