components

Menu renders a vertical list of MenuItem elements. Items can be selectable (with single or multiselect), highlighted, disabled, or toggleable. Use Menu for inline lists within a panel or sidebar. For dropdown menus triggered by a button, use DropdownMenu or DropdownButton instead. MenuItem emits an onMenuItemSelect event when clicked. In selectable mode, the parent Menu tracks selected values in the selected array and emits onMenuSelect when the selection changes.

Import

import { Menu, MenuItem } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Present a list of actions or options in a vertical menu.
+Build context menus or action lists.
+When items can be selected (single or multi-select mode).

When not to use

−For page-level navigation — use SideNavigation.
−For triggering a menu from a button — use DropdownMenu or DropdownButton.
−For form option selection — use InputSelect.

Examples

Code Samples

Basic Menu

A simple menu with clickable items.

import { Menu, MenuItem } from "@skedulo/breeze-ui-react";

export default function BasicMenu() {
  return (
    <Menu>
      <MenuItem value="profile">Profile</MenuItem>
      <MenuItem value="settings">Settings</MenuItem>
      <MenuItem value="help">Help</MenuItem>
      <MenuItem value="logout" disabled>Logout</MenuItem>
    </Menu>
  );
}

Selectable Menu

Items show a check indicator when selected. Use multiselect for multiple selections.

import { useState } from "react";
import { Menu, MenuItem } from "@skedulo/breeze-ui-react";

export default function SelectableMenu() {
  const [selected, setSelected] = useState(["plumbing"]);

  return (
    <Menu
      selectable
      multiselect
      selected={selected}
      onMenuSelect={(e) => setSelected(e.detail.selected)}
    >
      <MenuItem value="plumbing">Plumbing</MenuItem>
      <MenuItem value="electrical">Electrical</MenuItem>
      <MenuItem value="hvac">HVAC</MenuItem>
    </Menu>
  );
}

Guidelines

Do

✓Use selectable prop for selection-based menus.
✓Use onMenuItemSelect to handle item clicks.
✓Group related items visually.

Don't

✗Don't put too many items (>10) without grouping or search.
✗Don't mix action items with navigation items.

API Reference

Prop	Type	Default	Description
selected	string[]	—	Array of selected MenuItem values. Controls which items appear checked.
selectable	boolean	false	Makes items selectable with a visual check indicator.
multiselect	boolean	false	Allows multiple items to be selected simultaneously.
size	"small" \| "medium" \| "large"	"medium"	Controls the height and text size of menu items.
onMenuSelect	(e: MenuSelectEvent) => void	—	Fires when the selected items change.
onMenuItemSelect	(e: MenuItemSelectEvent) => void	—	Fires when any individual item is clicked.

Related Components

Dropdown Menu DropdownButton Navigation