Command Menu

A 451px panel for searching and jumping anywhere: a search field, filter tags, grouped results in 48px or 64px rows, and a footer of key hints. One row is always highlighted, so Enter always has a destination.

⌘K

9 results

↑ ↓ to move, Enter to open, Esc to clear

import {
  CommandMenuBlock,
  CommandMenuSearch,
  CommandMenuFilterTags,
  CommandMenuGroup,
  CommandMenuItem,
  CommandMenuFooter,
} from '@orvain/react';
 
<CommandMenuBlock
  variant="results"
  open
  closeOnSelect={false}
  header={
    <>
      <CommandMenuSearch variant="bordered" placeholder="Search or jump to" clearable={false} />
      <CommandMenuFilterTags
        tags={[
          { key: 'people', label: 'People' },
          { key: 'files', label: 'Files' },
          { key: 'pages', label: 'Pages' },
        ]}
        showSettingsButton={false}
        onTagClick={(key) => setTag(key)}
      />
    </>
  }
  footer={
    <CommandMenuFooter
      hints={[
        { keys: ['ArrowLeft', 'ArrowRight'], label: 'Navigate' },
        { keys: ['⌘'], label: 'Tags' },
        { keys: ['⌘'], label: 'Open' },
      ]}
    />
  }
>
  <CommandMenuGroup label="Recent">
    <CommandMenuItem layout="compact" icon={<ProjectIcon />} title="New project added" badge="Design" />
    <CommandMenuItem layout="compact" icon={<CalendarIcon />} title="Calendar" />
    <CommandMenuItem layout="compact" icon={<UserAvatar />} title="Ethan Cole" showChevron />
  </CommandMenuGroup>
  <CommandMenuGroup label="Actions" hideLabel>
    <CommandMenuItem layout="compact" icon={<BellIcon />} title="Remind me" />
    <CommandMenuItem layout="compact" icon={<TranslateIcon />} title="Translation" shortcut="⌘" />
  </CommandMenuGroup>
</CommandMenuBlock>

Add an Orvain Command Menu with a bordered “Search or jump to” field, the tags People, Files, Pages and Actions, 48px rows and a keyboard hint footer; 9 commands in 4 groups: • Suggested: “Create project” (⌘N), “Invite teammate”, “Schedule review” with a “New” badge • People: “Cara Brook”, “Ethan Cole”, “Khadija Alaa” • Files: “Roadmap Q4”, “Launch calendar” • Actions: “Notification settings” (⌘,)

Orvain MCPIncluded with the library

When to use#

As a keyboard-first way to reach any page, person, file or action, usually opened with ⌘K.
When a product has more destinations than a navigation bar can show.

When not to use

Use a Dropdown to choose one value inside a form.
Use page navigation for the few places everyone visits every day.

Anatomy#

1Search field

48 tall, radius 12, a 1px #e1e1e1 stroke inside; a search glyph, the query, and a ⌘K key (a clear button once typing). Or a borderless pill.

2Filter tags

26px tags, radius 6, a hairline; the chosen one fills dark. They narrow the results by kind.

3Groups

A 14px Regular label over rows, 24px in, with a hairline between groups; the list scrolls with a visible bar.

4Row

48 (compact) or 64 (detailed) tall, radius 16: a 24px glyph or avatar (a 40px well when detailed), the title, and an optional description, badge, shortcut or chevron.

5Footer

56 tall on #f2f2f2: ↑ ↓ Navigate, ↵ Open, Esc Close, as 32px keys.

States#

Highlighted

A 4% ink wash on the current row; the first result by default.

Typing

Results narrow as you type; the key hint becomes a clear button.

Filtered

A chosen tag keeps only its kind of result.

Empty

Says why: no results for this query, or nothing indexed under this filter.

Dialog

The same panel over the 40% overlay, opened on demand.

Source#

Preview – final code pending

The Command Menu is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

command menus