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

View 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.