CommandMenu
CommandMenu is a search-driven command palette component.
CommandMenu requires a collection of options via the options property. Use group to display grouped commands with optionGroupLabel and optionGroupChildren.
- Recents
- Check For Updates
- Open Settings
- Search Files
- Open Terminal
- View History
- Open Chat
- Files
- New File
- New Folder
- Save All
- Change Theme
- Run Task
- Stop Task
- Export Project
- Import Project
- Delete File
- Duplicate File
- Source
- Git: Commit
- Git: Push
- Git: Pull
- Switch Account
- Open Documentation
- Git: Sync
- Git: Create Branch
- Git: Create Tag
- Editor
- Align Left
- Align Center
- Align Right
- Toggle Bold
- Toggle Italic
- Insert Link
- Insert Image
- Insert List
- Navigation
- Go to Home
- Go Back
- Go Forward
- Open Explorer
- View Bookmarks
- Open Minimap
- View
- Toggle Preview
- Maximize Window
- Minimize Window
- Grid View
- List View
- Light Mode
- Dark Mode
- Tools
- Open Calculator
- Open Calendar
- Open Timer
- View Analytics
- View Trends
- Open Database
Usage #
Examples #
Basic #
CommandMenu requires a collection of options via the options property. Use group to display grouped commands with optionGroupLabel and optionGroupChildren.
- Recents
- Check For Updates
- Open Settings
- Search Files
- Open Terminal
- View History
- Open Chat
- Files
- New File
- New Folder
- Save All
- Change Theme
- Run Task
- Stop Task
- Export Project
- Import Project
- Delete File
- Duplicate File
- Source
- Git: Commit
- Git: Push
- Git: Pull
- Switch Account
- Open Documentation
- Git: Sync
- Git: Create Branch
- Git: Create Tag
- Editor
- Align Left
- Align Center
- Align Right
- Toggle Bold
- Toggle Italic
- Insert Link
- Insert Image
- Insert List
- Navigation
- Go to Home
- Go Back
- Go Forward
- Open Explorer
- View Bookmarks
- Open Minimap
- View
- Toggle Preview
- Maximize Window
- Minimize Window
- Grid View
- List View
- Light Mode
- Dark Mode
- Tools
- Open Calculator
- Open Calendar
- Open Timer
- View Analytics
- View Trends
- Open Database
Filter #
A custom filter function can be provided with the filter property. The function receives the label, search term, and optional keywords, and should return a score (0 means no match).
- Recents
- Check For Updates
- Open Settings
- Search Files
- Open Terminal
- View History
- Open Chat
- Files
- New File
- New Folder
- Save All
- Change Theme
- Run Task
- Stop Task
- Export Project
- Import Project
- Delete File
- Duplicate File
- Source
- Git: Commit
- Git: Push
- Git: Pull
- Switch Account
- Open Documentation
- Git: Sync
- Git: Create Branch
- Git: Create Tag
- Editor
- Align Left
- Align Center
- Align Right
- Toggle Bold
- Toggle Italic
- Insert Link
- Insert Image
- Insert List
- Navigation
- Go to Home
- Go Back
- Go Forward
- Open Explorer
- View Bookmarks
- Open Minimap
- View
- Toggle Preview
- Maximize Window
- Minimize Window
- Grid View
- List View
- Light Mode
- Dark Mode
- Tools
- Open Calculator
- Open Calendar
- Open Timer
- View Analytics
- View Trends
- Open Database
Controlled #
The search value can be controlled with two-way binding using [(search)]. An empty template customizes the message when no results are found.
- Recents
- Check For Updates
- Open Settings
- Search Files
- Open Terminal
- View History
- Open Chat
- Files
- New File
- New Folder
- Save All
- Change Theme
- Run Task
- Stop Task
- Export Project
- Import Project
- Delete File
- Duplicate File
- Source
- Git: Commit
- Git: Push
- Git: Pull
- Switch Account
- Open Documentation
- Git: Sync
- Git: Create Branch
- Git: Create Tag
- Editor
- Align Left
- Align Center
- Align Right
- Toggle Bold
- Toggle Italic
- Insert Link
- Insert Image
- Insert List
- Navigation
- Go to Home
- Go Back
- Go Forward
- Open Explorer
- View Bookmarks
- Open Minimap
- View
- Toggle Preview
- Maximize Window
- Minimize Window
- Grid View
- List View
- Light Mode
- Dark Mode
- Tools
- Open Calculator
- Open Calendar
- Open Timer
- View Analytics
- View Trends
- Open Database
With Dialog #
CommandMenu can be used inside a Dialog to create a command palette experience. Press Ctrl+K (or Cmd+K on Mac) to open.
Custom #
Custom content can be displayed for each item using the item template.
- Recents
- Check For UpdatesCommand
- Open SettingsCommand
- Search FilesCommand
- Open TerminalView
- View HistoryView
- Open ChatCommunication
- Files
- New FileFile
- New FolderFile
- Save AllFile
- Change ThemeAppearance
- Run TaskCommand
- Stop TaskCommand
- Export ProjectFile
- Import ProjectFile
- Delete FileFile
- Duplicate FileFile
- Source
- Git: CommitSource Control
- Git: PushSource Control
- Git: PullSource Control
- Switch AccountAccount
- Open DocumentationHelp
- Git: SyncSource Control
- Git: Create BranchSource Control
- Git: Create TagSource Control
- Editor
- Align LeftEditor
- Align CenterEditor
- Align RightEditor
- Toggle BoldEditor
- Toggle ItalicEditor
- Insert LinkEditor
- Insert ImageEditor
- Insert ListEditor
- Navigation
- Go to HomeNavigation
- Go BackNavigation
- Go ForwardNavigation
- Open ExplorerNavigation
- View BookmarksNavigation
- Open MinimapNavigation
- View
- Toggle PreviewView
- Maximize WindowView
- Minimize WindowView
- Grid ViewView
- List ViewView
- Light ModeView
- Dark ModeView
- Tools
- Open CalculatorTools
- Open CalendarTools
- Open TimerTools
- View AnalyticsTools
- View TrendsTools
- Open DatabaseTools
Accessibility #
Screen Reader
The search input has a combobox role with aria-expanded, aria-controls and aria-activedescendant attributes. The list element uses the listbox role and each item has an option role. Value to describe the component can be provided via ariaLabel prop.
Keyboard Support
| Key | Function |
|---|---|
| down arrow | Moves focus to the next option. |
| up arrow | Moves focus to the previous option. |
| enter | Selects the focused option. |
| home | Moves focus to the first option. |
| end | Moves focus to the last option. |
