<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import { MenuBar } from "kumo-svelte/components/menubar";
  let active = $state<string | undefined>("bold");

</script>

{#snippet boldIcon()}
  <TextBIcon />
{/snippet}

{#snippet italicIcon()}
  <TextItalicIcon />
{/snippet}

<MenuBar
  isActive={active}
  optionIds
  options={[
    {
      icon: boldIcon,
      id: "bold",
      tooltip: "Bold",
      onSelect: () => {
        active = active === "bold" ? undefined : "bold";
      },
    },
    {
      icon: italicIcon,
      id: "italic",
      tooltip: "Italic",
      onSelect: () => {
        active = active === "italic" ? undefined : "italic";
      },
    },
  ]}
/>

Import

import { MenuBar } from "kumo-svelte/components/menubar";

Usage

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import { MenuBar } from "kumo-svelte/components/menubar";
  let active = $state<string | undefined>("bold");
</script>

{#snippet boldIcon()}
  <TextBIcon />
{/snippet}

<MenuBar
  isActive={active}
  optionIds
  options={[
    {
      icon: boldIcon,
      id: "bold",
      tooltip: "Bold",
      onSelect: () => {
        active = active === "bold" ? undefined : "bold";
      },
    },
  ]}
/>

Examples

Text Formatting

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import { MenuBar } from "kumo-svelte/components/menubar";
  let active = $state<string | undefined>("bold");

</script>

{#snippet boldIcon()}
  <TextBIcon />
{/snippet}

{#snippet italicIcon()}
  <TextItalicIcon />
{/snippet}

<MenuBar
  isActive={active}
  optionIds
  options={[
    {
      icon: boldIcon,
      id: "bold",
      tooltip: "Bold",
      onSelect: () => {
        active = active === "bold" ? undefined : "bold";
      },
    },
    {
      icon: italicIcon,
      id: "italic",
      tooltip: "Italic",
      onSelect: () => {
        active = active === "italic" ? undefined : "italic";
      },
    },
  ]}
/>

Without Active State

<script lang="ts">
  import TextBIcon from "phosphor-svelte/lib/TextBIcon";
  import TextItalicIcon from "phosphor-svelte/lib/TextItalicIcon";
  import { MenuBar } from "kumo-svelte/components/menubar";
  let active = $state<string | undefined>();

</script>

{#snippet boldIcon()}
  <TextBIcon />
{/snippet}

{#snippet italicIcon()}
  <TextItalicIcon />
{/snippet}

<MenuBar
  isActive={active}
  optionIds
  options={[
    {
      icon: boldIcon,
      id: "bold",
      tooltip: "Bold",
      onSelect: () => {
        active = active === "bold" ? undefined : "bold";
      },
    },
    {
      icon: italicIcon,
      id: "italic",
      tooltip: "Italic",
      onSelect: () => {
        active = active === "italic" ? undefined : "italic";
      },
    },
  ]}
/>

API Reference

MenuBar

Prop	Type	Default
class	`string`	—
isActive*	`number \| boolean \| string \| undefined`	—
optionIds	`boolean`	`false`
options*	`MenuBarOption[]`	—

Accessibility

MenuBar uses Bits UI’s Toolbar primitive. Each option button receives an aria-label from tooltip and an aria-pressed state based on isActive.