/ toolbar

Toolbar

@kumiki/components/toolbar

Compound <Root> / <Item> / <Separator> — APG toolbar pattern with a single tab stop and arrow-key roving navigation between enabled items.

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 { createToolbar } from '@kumiki/headless/toolbar';
  const ctl = createToolbar({});
</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

Compound usage

<script lang="ts">
  import { Toolbar } from '@kumiki/components/toolbar';
</script>

<Toolbar.Root>
  <!-- subcomponents go here -->
</Toolbar.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

Editor toolbar

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

<Toolbar.Root aria-label="Formatting">
  <Toolbar.Item><b>B</b></Toolbar.Item>
  <Toolbar.Item><i>I</i></Toolbar.Item>
  <Toolbar.Item><u>U</u></Toolbar.Item>
  <Toolbar.Separator />
  <Toolbar.Item>Link</Toolbar.Item>
</Toolbar.Root>

This component, layer by layer

Keyboard

Test discipline