Menus

Menus are the presentation layer for command arrays. They all receive data, optional meta, and commands.

Shared contract

<SomeCommandMenu
  data={rowOrContextData}
  meta={optionalMeta}
  commands={[taskUpdateStatusCommand, taskDeleteCommand]}
/>

• data: passed to each command's render, visibleWhen, and disabledWhen callbacks
• meta: optional additional context for meta-aware builders
• commands: plain array of command definitions

Menus also accept lifecycle props:

• onSuccess
• onError
• onSettled
• fallback

InlineCommandMenu

Best for visible actions in headers, toolbars, and desktop detail views.

<InlineCommandMenu data={null} commands={[projectCreateCommand]} />

Loading state:

<InlineCommandMenuLoading />

DropdownCommandMenu

Best when horizontal space is limited or actions are secondary.

<DropdownCommandMenu
  data={task}
  commands={[
    taskUpdateStatusCommand,
    taskUpdateAssigneeCommand,
    taskDeleteCommand,
  ]}
/>

Loading state:

<DropdownCommandMenuLoading />

ContextCommandMenu + ContextCommandMenuContent

Best for right-click interactions on rows/cards.

<ContextCommandMenu>
  <ContextCommandMenuTrigger>...</ContextCommandMenuTrigger>
  <ContextCommandMenuContent
    data={row}
    commands={[customerDeleteCommand]}
    emptyLabel="Geen acties beschikbaar"
  />
</ContextCommandMenu>

FloatingCommandMenu

Best for bulk selection action bars in tables.

<FloatingCommandMenu
  state={selected.length > 0 ? "open" : "closed"}
  data={selected}
  commands={[taskUpdateStatusCommand, taskDeleteCommand]}
  label={selected.length}
  labelTooltip={`${selected.length} geselecteerd`}
  onClose={() => setSelected([])}
/>

• label is shown in front of the commands, e.g. the amount of selected items.
• labelTooltip is shown when hovering the label, for extra context.
• emptyLabel (default "Geen acties voor deze selectie") is shown when no command is visible, including when every command is hidden by visibleWhen or permissions.
• onClose adds a close button after the commands. Pressing escape triggers the same button.

Built on the UI Floating Menu.

ResponsiveCommandMenu

Best default for detail topbars when you want desktop/mobile behavior out of the box.

<ResponsiveCommandMenu
  data={project}
  commands={[
    projectUpdateStatusCommand,
    projectArchiveCommand,
    projectRestoreCommand,
    projectDeleteCommand,
  ]}
/>

Loading state:

<ResponsiveCommandMenuLoading />

Choosing the right menu

• use InlineCommandMenu for immediate visibility
• use DropdownCommandMenu for compact layouts
• use ContextCommandMenu for row/card context actions
• use FloatingCommandMenu for bulk actions
• use ResponsiveCommandMenu for adaptive topbar actions

Recommendation

Compose command arrays locally where the menu is rendered. If the same set repeats often, extract a nearby local constant, but avoid registry-style filtering and vague exported groups.