Skip to content

Menu

A dropdown list of actions anchored to a trigger element.

A Menu renders a dropdown list of actions anchored to a trigger element. Each entry is a regular item or a separator, and an item can take tone="critical" for a destructive action such as delete: the label and icon carry the critical colour while the row keeps the background every other row has. A menu that offers a choice (for example a language switcher) marks the current entry with selected; the menu then renders as a radio group and highlights that entry.

Usage

Section titled “Usage”
import { Button, Menu } from '@workflowbuilder/ui';


function Example() {
  return (
    <Menu
      items={[
        { label: 'Edit', onClick: () => {} },
        { label: 'Duplicate', onClick: () => {} },
        { type: 'separator' },
        { label: 'Delete', tone: 'critical', onClick: () => {} },
      ]}
    >
      <Button variant="secondary">Open menu</Button>
    </Menu>
  );
}

A menu with a current choice:

<Menu
  items={[
    { label: 'English', selected: true, onClick: () => setLanguage('en') },
    { label: 'Polski', selected: false, onClick: () => setLanguage('pl') },
  ]}
>
  <Button variant="secondary">EN</Button>
</Menu>
Section titled “Menu Trigger Button”

Menu.TriggerButton is the icon-only trigger for a menu: a NavButton that stays in its pressed state for as long as the menu is open. It reads the open state from the enclosing Menu, so it needs no state of its own.

 
import { DotsThreeVertical } from '@phosphor-icons/react';
import { Menu } from '@workflowbuilder/ui';


function Example() {
  return (
    <Menu items={[{ label: 'Edit', onClick: () => {} }]}>
      <Menu.TriggerButton aria-label="Open menu">
        <DotsThreeVertical />
      </Menu.TriggerButton>
    </Menu>
  );
}

It renders a NavButton, so its appearance is customized through the NavButton variables.

Props

Section titled “Props”
itemsrequired
TypeMenuItemProps[]

Array of menu items to be rendered in the menu. Each item can be either a regular menu item or a separator.

children
TypeReactElement

The trigger element that will open the menu when clicked. This element will be wrapped in a button with appropriate ARIA attributes. `Menu.TriggerButton` renders an icon-only trigger that follows the open state.

offset
TypeOffsetOptions

Distance between a popup and the trigger element

onOpenChange
Type(open: boolean, event: Event) => void

Callback fired when the component requests to be opened or closed. Receives the next open state and the native event that triggered the change (if any).

open
Typeboolean

Controls whether the menu is open or closed. When omitted, the menu's open state will be managed internally and toggled by clicking on the `children` trigger element.

placement
TypeMenuPlacement
Default'bottom-end'

The preferred placement of the menu relative to its trigger element. Uses Floating UI placement options.

size
TypeItemSize
Default'medium'

Size variant for the menu items.

Section titled “Menu.TriggerButton”

Also accepts every standard <button> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

childrenrequired
TypeIconNode
size
TypeNavButtonSize
Default'm'
tooltip
Typestring

Text of a tooltip shown when the button is hovered or focused.

tooltipType
TypeTooltipVariant
variant
TypeNavButtonVariant
Default'square'

CSS variables

Section titled “CSS variables”

This component does not expose its own CSS variables.