Skip to main content

Command Menu

Command Menu is a searchable overlay for running commands and navigating, like jumping to a page or switching projects. It opens with a keyboard shortcut and filters grouped items as people type.

Import

import { CommandMenu } from '@vortexlabs/vortex';
import type { CommandMenuProps } from '@vortexlabs/vortex';

Other links

Storybook

CommandMenu.Root

CommandMenu.Root props
PropTypeDefaultAttributes
open
boolean
No default value
defaultOpen
boolean
false
onOpenChange
callback
No default value
defaultShortcut
string
Meta+K
children
React.ReactNode
No default value

CommandMenu.Content

CommandMenu.Content props
PropTypeDefaultAttributes
placeholder
string
Type a command or search...
inputAriaLabel
string
No default value
crumbs
string[]
No default value
onCrumbClick
callback
No default value
onBackClick
callback
No default value
loading
boolean
false
loadingPlaceholder
React.ReactNode
Centered "Loading..." text.
variant
union
dim
maxResults
number
Infinity
children
React.ReactNode
No default value

CommandMenu.Group

CommandMenu.Group props
PropTypeDefaultAttributes
label
string
No default value
children
React.ReactNode
No default value

CommandMenu.Item

CommandMenu.Item props
PropTypeDefaultAttributes
id
string
No default value
icon
union
No default value
shortcut
string[]
No default value
onSelect
callback
No default value
href
string
No default value
children
union
No default value
keywords
string[]
No default value
ref
ref
No default value