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.