CommandMenu

CommandMenu defines how EnterUI handles a command dialog for navigation and quick actions, including default structure, accessible states, and token-driven styling.

#Default usage

<CommandMenu>
  <CommandMenuTrigger asChild><Button variant="secondary">Open command menu</Button></CommandMenuTrigger>
  <CommandMenuContent>
    <CommandMenuInput />
    <CommandMenuList>
      <CommandMenuGroup heading="Navigation">
        <CommandMenuItem>Open dashboard</CommandMenuItem>
        <CommandMenuItem>View components</CommandMenuItem>
      </CommandMenuGroup>
    </CommandMenuList>
  </CommandMenuContent>
</CommandMenu>

#Import

import {
  Button,
  CommandMenu,
  CommandMenuContent,
  CommandMenuEmpty,
  CommandMenuGroup,
  CommandMenuInput,
  CommandMenuItem,
  CommandMenuList,
  CommandMenuTrigger,
} from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

The menu content uses Dialog focus handling. Items are native buttons with option roles for reliable keyboard activation.

#API

• CommandMenuItem: onSelect, disabled, and button props.
• CommandMenuInput: native search input props.
• Close, portal, empty, group, and list primitives are exported.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.