Menu

Menu holds a short list of actions behind a key. Rows are 40 px with an optional glyph at the start and a Kbd shortcut at the end; the highlighted row takes the hover face and a 4 px ink bar, so it reads without colour. Checkbox and radio items, group labels, separators and submenus are parts of the same file.

Example#

Usage#

Use a menu for a short list of actions behind one key: duplicate, flag, archive. The trigger is a Button or an IconButton; rows are 40 px with an optional glyph and a keyboard shortcut.

• Parts. MenuItem, MenuCheckboxItem, MenuRadioGroup with MenuRadioItem, MenuGroup with MenuLabel, MenuSeparator and MenuSubmenu for one level of nesting.
• Keyboard. Arrows move, letters jump, Enter or Space activates, the right arrow opens a submenu and Escape closes.
• The highlighted row takes the hover face and a 4 px ink bar at its start, so it reads without colour.
• Navigation is a list of links or the Navbar, not a menu. Choosing a value in a form is a Select or a Combobox.

Recipe: view settings with check and radio items#

"use client";
import {
  Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuLabel,
  MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger,
} from "@maxgrits/overprint-react/menu";

export function ViewMenu() {
  return (
    <Menu>
      <MenuTrigger size="sm">View</MenuTrigger>
      <MenuContent>
        <MenuGroup>
          <MenuLabel>Show</MenuLabel>
          <MenuCheckboxItem defaultChecked>Archived projects</MenuCheckboxItem>
          <MenuCheckboxItem>Private notes</MenuCheckboxItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuRadioGroup defaultValue="week">
          <MenuLabel>Group by</MenuLabel>
          <MenuRadioItem value="week">Week</MenuRadioItem>
          <MenuRadioItem value="client">Client</MenuRadioItem>
        </MenuRadioGroup>
      </MenuContent>
    </Menu>
  );
}

Check and radio items keep the menu open after a press, so several settings can change in one visit; Escape or a press outside closes it.

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  Fernlight

  DuplicateCtrl+D

  Flag for review

  Archive

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Fernlight

  DuplicateCtrl+D

  Flag for review

  Archive

  The site default. Art on its own plates, one display moment per view.

• Press

  Fernlight

  DuplicateCtrl+D

  Flag for review

  Archive

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Fernlight

  DuplicateCtrl+D

  Flag for review

  Archive

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• Items are verbs: "Duplicate", "Archive", "Flag for review".
• Put the most common action first and destructive ones last, after a separator.
• An action that cannot be undone says so in a confirming dialog, not in the menu label.

Do and don't#

Accessibility#

• The APG menu pattern through Base UI: arrows, Home and End, typeahead, Enter and Space, Escape back to the trigger, Tab closes and moves on.
• The trigger carries aria-haspopup="menu"; checkbox and radio items carry aria-checked.
• It portals with its trigger's scope; reduced motion keeps only the fade.

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#