CommandMenu
A command dialog for navigation and quick actions.
#Default usage
#Usage
import {
Button,
CommandMenu,
CommandMenuContent,
CommandMenuEmpty,
CommandMenuGroup,
CommandMenuInput,
CommandMenuItem,
CommandMenuList,
CommandMenuTrigger,
} from "@froggdesign/enter-ui";
export function Example() {
return (
<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>
);
}#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.