Command menus

The search-first modal a keystroke opens. One compound CommandMenu owning the dialog, filter, selection, and shortcuts; the items and actions are yours.

Demo

hero
Composition
import { CommandMenu } from "@/components/application/command-menus/command-menu"; <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen} items={groups} emptyState={<NoResults />} > <CommandMenu.Group> <CommandMenu.List> {(group) => ( <CommandMenu.Section {...group}> {(item) => <CommandMenu.Item key={item.id} {...item} />} </CommandMenu.Section> )} </CommandMenu.List> </CommandMenu.Group> </CommandMenu>

In context

in-context
View in a page

Family

family
CommandMenu
CommandMenu.Trigger
New document
Support
CommandMenu.Section
Olivia Rhye
Olivia Rhye@olivia
CommandMenu.Item
⌘/
CommandInput
⌘K
P
CommandShortcut
to navigate
to select
esc
to close
return to parent
CommandMenu.Footer
esc
CommandMenuNavigationIcon

Types

cells

The item’s four leading types across both text layouts.

Default text

Olivia Rhye@olivia
⌘C
default item, default text
Olivia Rhye@olivia
⌘C
icon item, default text
Olivia Rhye
Olivia Rhye@olivia
⌘C
avatar item, default text
Olivia Rhye@olivia
⌘C
dot item, default text

Stacked text

Olivia Rhye@olivia
⌘C
default item, stacked text
Olivia Rhye@olivia
⌘C
icon item, stacked text
Olivia Rhye
Olivia Rhye@olivia
⌘C
avatar item, stacked text
Olivia Rhye@olivia
⌘C
dot item, stacked text

Layouts

cells

The field

⌘/
shortcut chip, the default
shortcut null
⌘/
with the help tooltip
⌘/
a typed query

The list

Invite colleagues
⌘I
Create new project
⌘N
Support
⌘H
one untitled section
Invite colleagues
⌘I
Create new project
⌘N
Support
⌘H
one titled section
Marketing site redesign
New document
⌘N
Invite colleagues
⌘I
Support
⌘H
two sections, the rule between them
Marketing site redesign
New document
⌘N
Invite colleagues
⌘I
Support
⌘H
to navigate
to select
esc
to close
return to parent
the footer over the last row

Compositions

cells

All ten bars the sheet draws: six Types, four again stacked.

Text default

Command only
Marketing site redesign
New document
⌘N
Invite colleagues
⌘I
My profile
⌘K
P
Team profile
⌘K
T
Invite colleagues
⌘I
Create new project
⌘N
Support
⌘H
Changelog
⌘C
Keyboard shortcuts
⌘?
Actions
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
to navigate
to select
esc
to close
return to parent
Users, with the footer
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
Users menu
GitHub
GitHubgithub.com
Linear
Linearlinear.app
Figma
Figmafigma.com
Zapier
Zapierzapier.com
Notion
Notionnotion.so
Slack
Slackslack.com
Dropbox
Dropboxdropbox.com
Integrations menu

No projects found

Your search “Landing page design” did not match any projects. Please try again.

Empty state

Text stacked

Marketing site redesignProject by Olivia Rhye in Notion migration
New documentCreate a new blank document
⌘N
Invite colleaguesCollaborate with your team on projects
⌘I
My profileView and edit your personal profile
⌘K
P
Team profileView and edit your team profile
⌘K
T
Invite colleaguesCollaborate with your team on projects
⌘I
Create new projectCreate a new blank project
⌘N
SupportOur team are here to help if you get stuck
⌘H
ChangelogLearn about our latest releases and updates
⌘C
Keyboard shortcutsSpeed up your workflow with shortcuts
⌘?
Actions
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
to navigate
to select
esc
to close
return to parent
Users, with the footer
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
Users menu, w-180
GitHub
GitHubgithub.com
Linear
Linearlinear.app
Figma
Figmafigma.com
Zapier
Zapierzapier.com
Notion
Notionnotion.so
Slack
Slackslack.com
Dropbox
Dropboxdropbox.com
Integrations menu, w-180

Content

cells
Marketing site redesign and rebrand for the Q3 launch
⌘K
M
a long label wraps; the chip keeps its place
Keyboard shortcuts
label only
My profile
⌘K
P
a two-key sequence
Olivia Rhye
Olivia RhyeProduct designer in Melbourne, on the marketing site redesign and the brand refresh, available Tuesdays and Thursdays
a long description, stacked, wraps

Behaviour

cells
Marketing site redesignProject by Olivia Rhye in Notion migration
New documentCreate a new blank document
⌘N
Invite colleaguesCollaborate with your team on projects
⌘I
My profileView and edit your personal profile
⌘K
P
Team profileView and edit your team profile
⌘K
T
Invite colleaguesCollaborate with your team on projects
⌘I
Create new projectCreate a new blank project
⌘N
SupportOur team are here to help if you get stuck
⌘H
ChangelogLearn about our latest releases and updates
⌘C
Keyboard shortcutsSpeed up your workflow with shortcuts
⌘?
ten stacked rows: the list scrolls at max-h-117
from md, in a real viewport: the footer and the offset

Loading

cells

Rows

Loading commands
default row, length short
Loading commands
default row, length medium
Loading commands
default row, length long
Loading commands
stacked row, length short
Loading commands
stacked row, length medium
Loading commands
stacked row, length long

The menu

⌘/
Results
to navigate
to select
esc
to close
return to parent
the whole menu: field, Results title and footer real
⌘/
Results
to navigate
to select
esc
to close
return to parent
stacked rows, the same field and footer real

States

cells
Olivia Rhye
Olivia Rhye@olivia
⌘C
Olivia Rhye
Olivia Rhye@olivia
⌘C
selected, seeded by defaultSelectedKeys
Olivia Rhye@olivia
⌘C
Olivia Rhye@olivia
⌘C
hover and focus, live
⌘/
field focus, live: the hairline doubles and turns brand