MenuBar - Kumo Svelte

<script lang="ts">
  import { MenuBar } from 'kumo-svelte';
  import { TextB, TextItalic } from 'phosphor-svelte';

  let active = $state<string | undefined>("bold");
</script>

<MenuBar
  isActive={active}
  optionIds
  options={[
    {
      icon: TextB,
      id: "bold",
      tooltip: "Bold",
      onClick: () => (active = active === "bold" ? undefined : "bold"),
    },
    {
      icon: TextItalic,
      id: "italic",
      tooltip: "Italic",
      onClick: () => (active = active === "italic" ? undefined : "italic"),
    },
  ]}
/>

Installation

Barrel

import { MenuBar } from 'kumo-svelte';

Granular

import { MenuBar } from 'kumo-svelte/components/menu-bar';

Usage

<script lang="ts">import { MenuBar } from "kumo-svelte";import { TextB } from "phosphor-svelte";</script><MenuBar  options={[    {      icon: TextB,      id: "bold",      tooltip: "Bold",      onClick: () => console.log("Bold clicked"),    },  ]}/>

Examples

Text Formatting

<script lang="ts">
  import { MenuBar } from 'kumo-svelte';
  import { TextB, TextItalic } from 'phosphor-svelte';

  let active = $state<string | undefined>("bold");
</script>

<MenuBar
  isActive={active}
  optionIds
  options={[
    {
      icon: TextB,
      id: "bold",
      tooltip: "Bold",
      onClick: () => (active = active === "bold" ? undefined : "bold"),
    },
    {
      icon: TextItalic,
      id: "italic",
      tooltip: "Italic",
      onClick: () => (active = active === "italic" ? undefined : "italic"),
    },
  ]}
/>

Without Active State

<script lang="ts">
  import { MenuBar } from 'kumo-svelte';
  import { TextB, TextItalic } from 'phosphor-svelte';

  let active = $state<string | undefined>(undefined);
</script>

<MenuBar
  isActive={active}
  optionIds
  options={[
    {
      icon: TextB,
      id: "bold",
      tooltip: "Bold",
      onClick: () => (active = active === "bold" ? undefined : "bold"),
    },
    {
      icon: TextItalic,
      id: "italic",
      tooltip: "Italic",
      onClick: () => (active = active === "italic" ? undefined : "italic"),
    },
  ]}
/>

API Reference

Prop	Type	Default	Description
class	`string`	-	Additional classes merged onto the nav element.
isActive *	`number \| boolean \| string`	-	Currently active option value, matched against the option index or id.
options *	`MenuOptionProps[]`	-	Array of menu option configurations.
optionIds	`boolean`	`false`	When true, each option's id is used for active matching instead of its array index.