Row-actions menu

The canonical action menu — icons, keyboard-shortcut hints, a separator, and a destructive item. The pattern behind a table row’s “⋯” button.

Preview

Source

apps/docs/app/recipes/menu-actions/recipe.tsx

'use client';

import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from '@hey-mike/tungsten';
import { Pencil, Copy, Trash2 } from 'lucide-react';

const triggerClass =
  'border-stroke bg-surface text-ink-1 hover:bg-surface-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors';

export default function MenuActionsRecipe() {
  return (
    <Menu defaultOpen>
      <MenuTrigger className={triggerClass}>Actions</MenuTrigger>
      <MenuContent>
        <MenuItem icon={<Pencil className="size-4" />} shortcut="⌘E">
          Edit
        </MenuItem>
        <MenuItem icon={<Copy className="size-4" />} shortcut="⌘D">
          Duplicate
        </MenuItem>
        <MenuSeparator />
        <MenuItem icon={<Trash2 className="size-4" />} destructive>
          Delete
        </MenuItem>
      </MenuContent>
    </Menu>
  );
}

'use client';

import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from '@hey-mike/tungsten';
import { Pencil, Copy, Trash2 } from 'lucide-react';

const triggerClass =
  'border-stroke bg-surface text-ink-1 hover:bg-surface-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors';

export default function MenuActionsRecipe() {
  return (
    <Menu defaultOpen>
      <MenuTrigger className={triggerClass}>Actions</MenuTrigger>
      <MenuContent>
        <MenuItem icon={<Pencil className="size-4" />} shortcut="⌘E">
          Edit
        </MenuItem>
        <MenuItem icon={<Copy className="size-4" />} shortcut="⌘D">
          Duplicate
        </MenuItem>
        <MenuSeparator />
        <MenuItem icon={<Trash2 className="size-4" />} destructive>
          Delete
        </MenuItem>
      </MenuContent>
    </Menu>
  );
}