Menu

Overview

The Menu lives in @flatpay-dk/ui and renders as a popover anchored to a trigger button. It supports a flat list of items, optional sections with headings, leading icons, trailing meta (keyboard shortcuts, counts, ✓), a danger variant for destructive actions, and an optional search input at the top. Open and close behavior, click-outside, Escape, and arrow-key navigation are all handled internally.

Anatomy

The popover surface is the canonical card geometry — 8 px radius, 1 px border, shadow-md per the Elevation map for dropdowns and popovers. Items inside are drawn with the brand’s product-UI vocabulary: Inter Tight at 14 px medium, leading icon at 16 px, 4 px hover radius, 12 × 8 px padding.

Items

Each item is an action. Write labels in the verb + noun format — Edit details, Export as CSV, Duplicate product, Archive order. The label says what will happen when the item is activated.

States

Four visible item states across two variants. Default and Danger share their state geometry — only the colour ramp shifts. Disabled is for actions that are contextually unavailable (Refund order when already refunded). If an action is never available, remove it from the menu entirely.

Selection mode

When the menu’s job is to pick rather than do — a filter list, a sort order, a workspace switcher — swap <MenuItem> for one of the selectable variants. They render the same surface and inherit the same keyboard behavior; the difference is the role and how the leading slot reads.

• <MenuItemCheckbox> — multi-select. Carries role="menuitemcheckbox", shows a checkmark in the leading slot when checked, and stays open on toggle so users can pick several in a row.
• <MenuItemRadio> — single-select. Carries role="menuitemradio", shows a checkmark when selected, and closes on activation. The consumer tracks which radio is selected; the component is controlled.
• <MenuRadioGroup> — wraps a set of radios and owns the selected value, so each child only declares its own value. Mirrors the Atlassian DropdownItemRadioGroup pattern. The group can carry an ALL-CAPS label (rendered + wired via aria-labelledby).
• Optional description. Every selection item accepts a description prop — a short supporting line that renders below the label in muted weight. Use it sparingly: when a label like “Auto archive” needs a sentence to make the consequence clear.
• Don’t mix selection items with action items. A menu either picks or does. If both are needed, split them — a filter menu plus an action menu, side by side, reads better than one mixed list.

Sections

When a menu has 4+ items, group them into sections with ALL-CAPS headings. Sections separate concerns — “Manage” actions stay together, destructive actions move into a labelled “Danger zone”. The heading is decorative for the eye and structural for screen readers (the section maps to role="group" with an aria-label).

Search

Optional search input at the top of the menu, used when the list is long enough that scanning isn’t the fastest path. Filtering is the consumer’s responsibility — the input emits its value via onValueChange; the consumer renders the matching subset of MenuItems. Don’t add search to short menus; the affordance feels noisy when there are five things to choose from.

Placement

Four placements — bottom-start (default), bottom-end, top-start, top-end. Default to bottom-start; flip to bottom-end when the trigger sits at the right edge of its container so the menu opens inward, not into the gutter.

Behavior

The component handles open / close, focus, and keyboard navigation internally. You wire up onSelect on each item; the menu closes on activation. Override the open state with the controlled open / onOpenChange pair if you need to coordinate with another piece of UI.

• Open. Click the trigger. Or focus the trigger and press Enter, Space, or ↓. Focus moves to the first item.
• Navigate. ↑ / ↓ moves through items, wrapping at the ends. Home / End jump to the first / last item. Disabled items are skipped.
• Activate. Click an item, or press Enter / Space while it has focus. The menu closes; focus returns to the trigger via Escape.
• Type-ahead.Typing a single letter jumps focus to the next item whose label starts with that letter. Continue typing within ~500 ms to refine the match (“ar” lands on Archive rather than Audit).
• Close. Escape closes and returns focus to the trigger. Clicking outside closes silently. Tab closes and lets focus advance to the next page element.
• Stay open after activation. Pass closeOnSelect={false} on a MenuItemfor actions that should leave the menu up — a “Refresh” row inside an otherwise-stable filter menu, for instance. Checkbox items default to staying open.

Accessibility

• ARIA. Trigger carries aria-haspopup="menu" and aria-expanded; the popover renders role="menu" and is labelled by the trigger via aria-labelledby. Items render role="menuitem".
• Focus.First item is focused on open. Focus is kept inside the menu while it’s open; Tab closes it. Focus returns to the trigger when the menu closes.
• Disabled items carry aria-disabled="true" and are skipped by the arrow-key cycle.
• Icon-only triggers need an aria-labelon the underlying Button — the menu’s name is taken from the trigger’s accessible name, not its visible label.

Code

Composable API — assemble the menu out of Trigger + Content + Items rather than passing a config object. The trigger can be any Button variant.

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuSection,
  MenuSeparator,
  Button,
} from "@flatpay-dk/ui";

<Menu>
  <MenuTrigger>
    <Button variant="secondary">Manage</Button>
  </MenuTrigger>
  <MenuContent placement="bottom-start" width={200}>
    <MenuSection heading="Manage">
      <MenuItem leadingIcon={<EditIcon />} onSelect={onEdit}>
        Edit details
      </MenuItem>
      <MenuItem leadingIcon={<DuplicateIcon />} onSelect={onDuplicate}>
        Duplicate
      </MenuItem>
      <MenuItem
        leadingIcon={<ExportIcon />}
        trailingMeta="⌘E"
        onSelect={onExport}
      >
        Export as CSV
      </MenuItem>
    </MenuSection>
    <MenuSeparator />
    <MenuSection heading="Danger zone">
      <MenuItem
        variant="danger"
        leadingIcon={<TrashIcon />}
        onSelect={onDelete}
      >
        Delete
      </MenuItem>
    </MenuSection>
  </MenuContent>
</Menu>

Selection mode

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItemCheckbox,
  MenuItemRadio,
  MenuRadioGroup,
  Button,
} from "@flatpay-dk/ui";

// Multi-select — stays open as the user toggles each row
const [filters, setFilters] = useState({ demoReady: true, building: true });

<Menu>
  <MenuTrigger><Button variant="secondary">Filter</Button></MenuTrigger>
  <MenuContent>
    <MenuItemCheckbox
      checked={filters.demoReady}
      onCheckedChange={(v) => setFilters({ ...filters, demoReady: v })}
      description="Live demo link is up and tracking events"
    >
      Demo ready
    </MenuItemCheckbox>
    <MenuItemCheckbox
      checked={filters.building}
      onCheckedChange={(v) => setFilters({ ...filters, building: v })}
    >
      Building
    </MenuItemCheckbox>
  </MenuContent>
</Menu>

// Single-select — group owns the value, each radio just declares its own
const [density, setDensity] = useState<"compact" | "default" | "spacious">("default");

<Menu>
  <MenuTrigger><Button variant="secondary">Density</Button></MenuTrigger>
  <MenuContent>
    <MenuRadioGroup label="Density" value={density} onValueChange={setDensity}>
      <MenuItemRadio value="compact" description="The most rows on screen">
        Compact
      </MenuItemRadio>
      <MenuItemRadio value="default" description="Balanced for everyday work">
        Default
      </MenuItemRadio>
      <MenuItemRadio value="spacious" description="Generous spacing, easier scanning">
        Spacious
      </MenuItemRadio>
    </MenuRadioGroup>
  </MenuContent>
</Menu>

// Standalone radio (no group) — caller manages selection across siblings
<MenuItemRadio selected={sort === "newest"} onSelect={() => setSort("newest")}>
  Newest first
</MenuItemRadio>

Best practices

• Reserve for secondary actions.Primary actions live in the page chrome. Menu carries the moves that don’t earn permanent space — Archive, Duplicate, Export.
• Use icons to reinforce meaning.Edit gets the pencil, Delete gets the trash, Export gets the down-arrow. Icons clarify the verb; they don’t replace the label.
• Cap at 10–12 items per menu. Beyond that, scanning becomes work. Either split the menu by section, surface a search input, or rethink the affordance — a side panel may serve better.
• Disable temporarily, remove permanently. Use disabled for actions that are unavailable right now (Refund when already refunded). If the action is never available for this user or this row, drop it from the menu entirely.
• One destructive action per menu. Any more and the user is being asked to make several high-stakes choices at once. Move the rest into a confirmation dialog.

Props

<Menu>

<MenuTrigger>

<MenuContent>

<MenuItem>

<MenuItemCheckbox>

<MenuRadioGroup>

<MenuItemRadio>

<MenuSection>

<MenuSearch>

Related