Command Menu

1
2
3'use client';

import { useState, type ReactNode } from 'react';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/command-menu.json

Usage#

import { CommandMenu, CommandMenuItem } from '@/components/navigation/command-menu';

<CommandMenu open={open} onOpenChange={setOpen} onValueChange={setValue}>
  <CommandInput placeholder="Jump to file..." />
  <CommandList>
    <CommandEmpty>No file found.</CommandEmpty>
    <CommandMenuItem value="page.tsx">page.tsx</CommandMenuItem>
  </CommandList>
</CommandMenu>

The consumer composes CommandInput, CommandList, CommandEmpty and the items as children and owns all copy; bind a keyboard shortcut to its open state to let a reader summon it from anywhere.

Composition#

CommandMenu
|-- CommandInput
`-- CommandList
    |-- CommandEmpty
    `-- CommandMenuItem

API reference#

CommandMenu#

Renders shadcn's CommandDialog and takes every prop it takes except onOpenChange, which is redefined below, plus:

It defaults CommandDialog's title to 'Command menu' and description to 'Search for a target to jump to.', both read by assistive technology though hidden on screen. It wraps its children in a Command that carries data-slot="command-menu".

CommandMenuItem#

Renders shadcn's CommandItem and takes every prop it takes except value, which is required here:

Choosing it runs the item's own onSelect if given, then reports value through the menu's onValueChange and closes the dialog. It sets data-slot="command-menu-item".