Command Menu

import { Calendar, CreditCard, Settings, User } from "lucide-react"

import { Button } from "@hel/ui/button"

When to use it#

Use a command menu when a Dropdown Menu has so many actions that people would rather type than look: a "go to" menu, a list of tools, an action picker. A search box is pinned above the list, and typing narrows it.

It opens from a button, next to the thing it belongs to. For a search that opens over the whole page, from a keyboard shortcut, use the Command Palette.

Import#

Copyimport {
  CommandMenu,
  CommandMenuTrigger,
  CommandMenuContent,
  CommandMenuItem,
  CommandMenuGroup,
  CommandMenuGroupLabel,
  CommandMenuSeparator,
} from "@hel/ui/command-menu"

Anatomy#

A command menu has the same parts as a dropdown menu. CommandMenuItem, CommandMenuGroup, CommandMenuGroupLabel, CommandMenuSeparator, CommandMenuSub and CommandMenuSubTrigger are the dropdown menu's own parts, under another name, so an item takes an icon, a kbd hint, variant="destructive" and disabled exactly as it does there.

The difference is CommandMenuContent. It adds the search box above the list, takes care of filtering, and shows a message when nothing matches. You do not add an input yourself. Pass the items straight in, with or without groups.

Copy<CommandMenu>
  <CommandMenuTrigger render={<Button variant="outline">Go to</Button>} />
  <CommandMenuContent className="w-64" placeholder="Where to?">
    <CommandMenuItem icon={Calendar}>Calendar</CommandMenuItem>
    <CommandMenuItem icon={CreditCard}>Billing</CommandMenuItem>
  </CommandMenuContent>
</CommandMenu>

As people type, the first match is highlighted. The arrow keys move between matches, Enter picks one, and Escape closes the menu.

Examples#

Your own texts#

placeholder is the text in the empty search box, and it also names the box for screen readers. emptyMessage is shown when no item matches. Both default to texts that the app can translate through its config.

import { Calculator, Calendar, Smile } from "lucide-react"

import { Button } from "@hel/ui/button"

Props#

CommandMenuContent#

CommandMenu#

Takes every prop of the Base UI menu, such as open and onOpenChange, and the options of its filter.