Menu

In review

Live · web

Click a trigger to drop its menu, anchored and clamped to the stage

Open with a click or Enter / Space / ↓. In the menu: ↑ ↓ move, → opens a submenu, ← / Esc back, Enter runs.

Session · gateway-refactorActionsView

Overflow

Last action: none yet · wrap on · sort recent. Pointer + keyboard both work; the island is live.

Code

TypeScript

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)
import { NockerlMenu, MenuItem } from '@dizyx/nockerl-react';

export function SessionOverflow() {
  const [wrap, setWrap] = useState(true);
  return (
    <NockerlMenu trigger={<NockerlIconButton icon="kebab" label="Session actions" />} align="end">
      <MenuItem icon="rename" shortcut="⌘R" onSelect={rename}>Rename</MenuItem>
      <MenuItem icon="settings" onSelect={editModel}>Edit provider / model</MenuItem>
      <MenuItem icon="fork" onSelect={fork}>Fork</MenuItem>

      <MenuSection label="View" />
      <MenuItem icon="wrap" checked={wrap} onSelect={() => setWrap((v) => !v)}>Wrap lines</MenuItem>

      <MenuSub icon="export" label="Export as">
        <MenuItem onSelect={() => exportAs('md')}>Markdown (.md)</MenuItem>
        <MenuItem onSelect={() => exportAs('json')}>JSON (.json)</MenuItem>
      </MenuSub>

      <MenuSeparator />
      <MenuItem icon="trash" tone="danger" onSelect={confirmDelete}>Delete</MenuItem>
    </NockerlMenu>
  );
}

Kotlin

// Android: Jetpack Compose (canonical). The session-overflow menu from
// chat/ui/SessionChipsBar.kt: a DropdownMenu of DropdownMenuItem rows, each with
// a leadingIcon + label; Delete is the destructive tail. (Material 3 has no
// checkbox/radio menu item, so a checked row shows a trailing Check icon.)
var expanded by remember { mutableStateOf(false) }

Box {
    NockerlIconButton(
        icon = Icons.Filled.MoreVert,
        contentDescription = "Session actions",
        onClick = { expanded = true },
    )
    DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
        DropdownMenuItem(
            text = { Text("Rename") },
            leadingIcon = { Icon(Icons.Outlined.Edit, contentDescription = null) },
            onClick = { expanded = false; onRename() },
        )
        DropdownMenuItem(
            text = { Text("Edit provider / model") },
            leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
            onClick = { expanded = false; onEdit() },
        )
        DropdownMenuItem(
            text = { Text("Fork") },
            leadingIcon = { Icon(Icons.AutoMirrored.Filled.CallSplit, contentDescription = null) },
            onClick = { expanded = false; onFork() },
        )
        HorizontalDivider()
        // Checked row → trailing Check; toggling keeps the menu open.
        DropdownMenuItem(
            text = { Text("Wrap lines") },
            leadingIcon = { Icon(Icons.Outlined.WrapText, contentDescription = null) },
            trailingIcon = { if (wrapLines) Icon(Icons.Outlined.Check, contentDescription = "On") },
            onClick = { onToggleWrap() },
        )
        HorizontalDivider()
        DropdownMenuItem(
            text = { Text("Delete", color = MaterialTheme.colorScheme.error) },
            leadingIcon = {
                Icon(Icons.Outlined.Delete, contentDescription = null,
                    tint = MaterialTheme.colorScheme.error)
            },
            onClick = { expanded = false; onDelete() },
        )
    }
}

Swift

// macOS: SwiftUI (canonical). UI/AppSettingsView.swift + MenuBarContent.swift:
// a Menu whose label is the trigger; Section groups + Divider() separate; a
// checked row shows a leading checkmark via Label(_, systemImage: "checkmark");
// Button(role: .destructive) is the destructive item; a nested Menu is a submenu.
Menu {
    Button { rename() } label: { Label("Rename", systemImage: "pencil") }
        .keyboardShortcut("r", modifiers: .command)
    Button { editModel() } label: { Label("Edit provider / model", systemImage: "gearshape") }
    Button { fork() } label: { Label("Fork", systemImage: "arrow.triangle.branch") }

    Section("View") {
        // A checked row = a leading checkmark; unchecked = plain text.
        Button { wrapLines.toggle() } label: {
            if wrapLines { Label("Wrap lines", systemImage: "checkmark") }
            else { Text("Wrap lines") }
        }
    }

    Menu("Export as") {                       // nested Menu = a submenu
        Button("Markdown (.md)") { exportAs(.md) }
        Button("JSON (.json)")  { exportAs(.json) }
    }

    Divider()
    Button(role: .destructive) { confirmDelete() } label: {
        Label("Delete", systemImage: "trash")
    }
} label: {
    Image(systemName: "ellipsis")
}
.menuStyle(.borderlessButton)
.menuIndicator(.hidden)

Parameters

TypeScript

Prop	Type	Default	Description
trigger *	ReactNode	n/a	The control that opens the menu on click / Enter / Space / ↓. Gets aria-haspopup + aria-expanded.
align	'start' | 'end'	'start'	Which trigger edge the menu aligns to. The menu flips up + clamps horizontally to stay on-screen.
children *	MenuItem | MenuSeparator | MenuSection | MenuSub	n/a	The menu contents: item rows, full-width separators, section labels, and nested submenus.
MenuItem.icon	string	n/a	Optional leading glyph. The icon column is reserved menu-wide so every label aligns.
MenuItem.shortcut	string	n/a	Trailing keyboard-shortcut hint (e.g. ⌘R), rendered in the mono font, muted.
MenuItem.checked	boolean	n/a	Renders the row as menuitemcheckbox (a leading cyan check). Toggling keeps the menu open.
MenuItem.tone	'default' | 'danger'	'default'	A danger item uses the error token and is divider-separated as the tail.
MenuItem.onSelect	() => void	n/a	Activation handler. Action items close the menu; checkable items toggle in place.

Kotlin

Parameter	Type	Default	Description
expanded *	Boolean	n/a	Whether the menu is open. Set true from the trigger's onClick.
onDismissRequest *	() -> Unit	n/a	Called when the menu should close (outside tap, back, Esc).
modifier	Modifier	Modifier	External modifier on the menu surface (e.g. fillMaxWidth(0.85f) for an anchored exposed dropdown).
item.text *	@Composable -> Unit	n/a	The row label, usually Text("…"). Use color = colorScheme.error for the destructive item.
item.leadingIcon	@Composable (() -> Unit)?	null	Optional icon before the label.
item.trailingIcon	@Composable (() -> Unit)?	null	Trailing slot. Render a Check for a selected row (M3 has no native checkable item).
item.enabled	Boolean	true	When false, the row is dimmed and non-interactive.
item.onClick *	() -> Unit	n/a	Row activation. Typically sets expanded = false then runs the action.

Swift

SwiftUI exposes the menu as Menu { content } label: { trigger }. There are no explicit state parameters. Menu owns open/close. Rows are standard Buttons; structure comes from Section, Divider, nested Menu, and Button(role:).

Style	Type	Default	Description
Menu(content:label:)	View	n/a	The dropdown. label is the trigger; content is the item list. Owns its own open/dismiss + keyboard.
Button(action:label:)	View	n/a	One item row. A leading Label(_, systemImage: "checkmark") marks a checked row; plain Text when unchecked.
Section(_:)	View	n/a	A titled group: the section label + implicit grouping (the wayfinding caption).
Divider()	View	n/a	A full-width separator between groups of items.
Menu(_:content:)	View	n/a	A nested menu = a submenu, opened to the side on hover / focus.
Button(role: .destructive)	View	n/a	The destructive item, system-tinted red (maps to the error token).
.keyboardShortcut(_:modifiers:)	modifier	n/a	Binds a key + modifier (e.g. "r", .command) and surfaces the ⌘-hint on the row.

Menu vs. long-press-pop vs. command-palette

Three sibling surfaces, three triggers. Don’t mix them:

• Menu (this page) is click-triggered and anchored to a control (a kebab ⋯ or actions button). Non-modal, no dim, positioned under/beside its trigger.
• Long-press pop is press-and-hold ON content (a bubble, a row): it dims the ground, lifts the target, and pops the same item vocabulary beside it.
• Command palette is the modal ⌘K centered overlay with type-to-search, a global launcher, not a per-control action list. (The combobox is the type-to-filter select, not a menu.)

Cross-platform drift (tracked for reconciliation)

The item grammar is shared; the real divergences between the shipped platforms:

• Surface ownership: web draws the menu surface itself (the canon overlay card: surface + hairline + top catch-light + a neutral shadow). Android’s DropdownMenu and Voice’s SwiftUI Menu (NSMenu-backed) use system-owned surfaces. Per Law 9 (honor the platform) they keep native elevation, motion, and dismissal, so the web card recipe deliberately does not port 1:1.
• Item vocabulary: web ships menuitemcheckbox / menuitemradio rows, section labels, nested submenus, and mono shortcut hints. Android’s shipped usage is plain action rows (DropdownMenuItem); Voice gets submenus + destructive roles from SwiftUI but has no checkbox/radio item variant in use. Adopting the richer row kinds natively is the open item.
• Point anchoring: web’s openAt(x, y) (context-menu positioning) has no shipped native counterpart yet; Android/Voice menus anchor to their trigger control only.