MenuBar - Kumo

import { useState } from "react";
import { MenuBar } from "@cloudflare/kumo";
import { TextBolderIcon, TextItalicIcon } from "@phosphor-icons/react";

export function MenuBarBasicDemo() {
  const [active, setActive] = useState<string | undefined>("bold");

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

Installation

Barrel

import { MenuBar } from "@cloudflare/kumo";

Granular

import { MenuBar } from "@cloudflare/kumo/components/menubar";

Usage

import { MenuBar } from "@cloudflare/kumo";
import { TextBolderIcon } from "@phosphor-icons/react";

export default function Example() {
  return (
    <MenuBar
      options={[
        {
          icon: <TextBolderIcon />,
          id: "bold",
          tooltip: "Bold",
          onClick: () => console.log("Bold clicked"),
        },
      ]}
    />
  );
}

Examples

Text Formatting

import { useState } from "react";
import { MenuBar } from "@cloudflare/kumo";
import { TextBolderIcon, TextItalicIcon } from "@phosphor-icons/react";

export function MenuBarTextFormattingDemo() {
  const [active, setActive] = useState<string | undefined>("bold");

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

Without Active State

import { useState } from "react";
import { MenuBar } from "@cloudflare/kumo";
import { TextBolderIcon, TextItalicIcon } from "@phosphor-icons/react";

export function MenuBarNoActiveDemo() {
  const [active, setActive] = useState<string | undefined>(undefined);

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

API Reference

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes merged via `cn()`.
isActive	`number \| boolean \| string`	-	The currently active option value — matched against option index or `id`.
options*	`MenuOptionProps[]`	-	Array of menu option configurations.
optionIds	`boolean`	-	When true, each option's `id` field is used for matching instead of its array index.