CommandMenu

CommandMenu gives operators a fast path to records, workflows, and high-frequency actions without leaving the current screen.

Import

import {
  CommandMenu,
  CommandMenuEmpty,
  CommandMenuGroup,
  CommandMenuInput,
  CommandMenuItem,
  CommandMenuList,
  CommandMenuSeparator,
  CommandMenuShortcut,
} from '@nim-ui/components';

Basic Usage

Operations command menu

Code

<CommandMenu label="Operations command menu">
  <CommandMenuInput placeholder="Search orders, users, or actions..." />
  <CommandMenuList>
    <CommandMenuEmpty>No command found.</CommandMenuEmpty>
    <CommandMenuGroup heading="Orders">
      <CommandMenuItem
        value="open order 4821 northwind high risk"
        meta="Northwind Supply · High risk · Today 16:30"
        badge="Review"
        shortcut="O 1"
        onSelect={openOrder}
      >
        Open ORD-4821
      </CommandMenuItem>
    </CommandMenuGroup>
  </CommandMenuList>
</CommandMenu>

Props

CommandMenuItem

Name	Type	Default	Description
`value*`	`string`	-	Searchable command value used by cmdk filtering and passed to onSelect.
`onSelect`	`(value: string) => void`	-	Called when the command is chosen.
`meta`	`ReactNode`	-	Secondary context such as customer, state, owner, or route.
`badge`	`ReactNode`	-	Small status or count marker aligned to the right.
`shortcut`	`ReactNode`	-	Optional keyboard hint for frequent commands.
`disabled`	`boolean`	-	Marks commands that are unavailable in the current workflow context.

Backoffice Guidance

Use value for search terms operators actually type: order id, customer, state, owner, action verb.
Keep meta factual and compact; it should help the operator choose the right record.
Show disabled commands when context explains why an action is unavailable.
Put CommandMenu inside a dialog, popover, or topbar search affordance depending on app shell needs.

Import

Basic Usage

Props

CommandMenuItem

Backoffice Guidance

On this page