Skip to main content

​
Overview

Command menu blocks provide powerful keyboard-driven interfaces that allow users to quickly search, navigate, and execute actions within your application. These components are essential for creating productivity-focused applications.

​
Available Blocks

Command Menu with Groups

Organized command palette with categorized groups for better navigation

Command Menu with Keyboard Shortcuts

Command menu displaying keyboard shortcuts for power users

Command Menu with Documentation Search

Specialized command menu for searching documentation and help content

​
Key Features

  • Instant Search: Fast, fuzzy search across all available commands
  • Keyboard Navigation: Full keyboard support with arrow keys and shortcuts
  • Command Groups: Organize commands by category for better discoverability
  • Recent Actions: Show recently used commands for quick access
  • Customizable Actions: Define any action or navigation command

​
Use Cases

Allow users to quickly jump to any page or section in your application without using the mouse.
Provide quick access to common actions like creating new items, exporting data, or changing settings.
Create keyboard-first experiences for advanced users who prefer not to use the mouse.

​
Implementation Example

Basic command menu integration: 
import { CommandMenuWithGroups } from '@/components/blocks/command-menu-01'
import { useState } from 'react'

export default function App() {
  const [open, setOpen] = useState(false)
  
  // Listen for Cmd+K or Ctrl+K
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }
    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])
  
  return (
    <>
      <CommandMenuWithGroups 
        open={open}
        onOpenChange={setOpen}
        commands={[
          {
            group: 'Navigation',
            items: [
              { label: 'Dashboard', action: () => router.push('/dashboard') },
              { label: 'Projects', action: () => router.push('/projects') },
            ]
          },
          {
            group: 'Actions',
            items: [
              { label: 'New Project', action: () => createProject() },
              { label: 'Export Data', action: () => exportData() },
            ]
          }
        ]}
      />
    </>
  )
}

​
Best Practices

The standard keyboard shortcut for command menus is Cmd+K (Mac) or Ctrl+K (Windows/Linux). Users expect this convention, so stick with it unless you have a specific reason to change it.

​
Organizing Commands

  • Group related commands together
  • Use clear, action-oriented labels (“Create New Project” not “Project Creation”)
  • Show keyboard shortcuts next to commands when available
  • Prioritize frequently used commands at the top

​
Search Optimization

  • Implement fuzzy search to handle typos
  • Include aliases for commands (e.g., “settings” and “preferences”)
  • Show recent commands for quick access
  • Clear the search input when the menu closes

​
Keyboard Shortcuts

ShortcutAction
Cmd/Ctrl + KOpen command menu
↑/↓Navigate commands
EnterExecute selected command
EscClose menu
Cmd/Ctrl + 1-9Quick access to first 9 commands

​
Customization Options

  • Appearance: Customize colors, spacing, and typography
  • Icons: Add custom icons for different command types
  • Sections: Define custom command groups and separators
  • Filtering: Implement custom search and filter logic
  • Analytics: Track command usage to optimize your interface
  • Sidebar - Alternative navigation pattern
  • Dialogs - Modal interactions
  • AI Chat - Conversational command interface

Build docs developers (and LLMs) love

Get started for freeTalk to us