MenuBar - Kumo

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

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

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

Without Active State

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

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.