Context Menus and Quick Actions

1) Purpose and scope

• Local actions on the object (card, table row, coefficient).
• Batch actions on the selection.
• Hidden but not critical options (secondary).
• Rule: do not hide critical and primary actions only in the context menu.

2) Triggers and variants

Right-click/Shift + F10/Menu key - classic contextual.
Icon button (kebab '⋮', meatballs'... ', context) - universal for touch/desktop.
Long-press (400-600 ms) is the mobile equivalent of right-click.
Command palette (⇧⌘P/Ctrl + K) - global quick commands with search.
Swipe-reveal (iOS/Android lists) - opens a number of quick shortcuts.

Recommendation: provide at least two call methods (icon + context click/key).

3) Content and priority

The first 1-3 points are frequent actions; then a separator; further - less commonly used.
Destructive - at the end, marked with a color/icon (and often - through confirmation/undo).
Wording - verb + object ("Add to favorites," "Copy ID").
The label ≠ only an icon: an icon is an amplifier, not a replacement for text.

4) Grouping and status

Delimiters for logical blocks (view, edit, admin, dangerous).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Do not show role inaccessible if this is confusing; alternatively - show as' disabled'with a reason hint.

5) Availability (A11y)

Container: 'role = "menu"', elements: 'role = "menuitem" '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: The only' tabindex =" 0"' on the current element, the rest '-1'.
↑↓ arrows - movement, →/← - entry/exit from the submenu. Enter/Space - activation, Esc - close.
Typeahead: Printing the first letter shifts focus to the point.
The focus ring is visible; contrast of text and icons ≥ AA.
For the button icon, use' aria-haspopup =" menu"' and 'aria-expanded'.

html
<button id="more" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1">Еще</button>
<ul id="menu-1" role="menu" aria-labelledby="more" hidden>
<li role="menuitem" tabindex="0">Открыть</li>
<li role="menuitem">Скопировать ссылку</li>
<li role="menuitemcheckbox" aria-checked="true">В избранном</li>
<li role="menuitem" data-danger="true">Удалить</li>
</ul>

js const menu = document.getElementById('menu-1');
menu.addEventListener('keydown', e=>{
const items=[...menu.querySelectorAll('[role^="menuitem"]')];
let i=items.findIndex(n=>n.tabIndex===0);
if(e.key==='ArrowDown'){ items[i].tabIndex=-1; items[(i+1)%items.length].tabIndex=0; items[(i+1)%items.length].focus(); e.preventDefault(); }
if(e.key==='ArrowUp'){ items[i].tabIndex=-1; items[(i-1+items.length)%items.length].tabIndex=0; items[(i-1+items.length)%items.length].focus(); e.preventDefault(); }
if(e.key==='Escape'){ menu.hidden=true; document.getElementById('more').focus(); }
});

6) Positioning and performance

Open the menu at the source (click-point/icon), shift 4-8 px; watch the edges of the screen (flip/shift).
Portal/layer over ('z-index') with click catching out.
Render lazily, recycle the list in long menus (no virtualization needed, but avoid hundreds of items).
Animations only 'opacity/transform', duration 140-200 ms (out faster: 100-160 ms).
Open the submenu by 'ArrowRight' and hover with a delay of 80-120 ms (anti-flicker).

7) Mobile patterns

Long-press with haptics; timings 450 ± 100 ms.
Bottom sheet as a form of context menu (thumb-reachable).
Swipe actions in the lists: on the left - "archive/favorites," on the right - "delete" (confirmation/undo).
Click zones ≥ 44 × 44, short signatures, icons 20-24 px.

8) Confirmations, undo and security

Destructive actions: either the second confirmation (modal/confirm pattern), or undo 5-10 s.
Financial/risk - through explicit confirm with context of consequences.
Show the reason 'disabled' ("Insufficient rights," "Limit reached").

9) Quick actions without menu

Inline shortcuts in the line (icons, "" "," "⋯").
Hover-reveal (desktop): show actions when hovering, but leave an explicit trigger.
Command palette: search by actions, hotkeys in tooltips ("⌘S," "Ctrl + Enter").

10) Copywriting and icons

Verb + object, 2-3 words.
Start with an action ("Delete entry..."), not a noun ("Delete entry").
Icons from a single set; Use the same icons for the same actions throughout the product.
Explanatory hints ('title '/tooltip) for ambiguous items.

11) Telemetry and experiments

CTR by item, median time from opening to click, rate of cancellations/undo.
Number of misclicks (destructive → canceled).
A/B: order and grouping of items, the presence of quick shortcuts in the list.
Logs of "invisible" items (no one uses) - candidates for deletion/transfer.

12) Design system tokens (example)

json
{
"menu": {
"minWidth": 208,
"itemHeight": 36,
"gap": 4,
"padding": 8,
"radius": 12,
"elev": 8,
"anim": { "inMs": 180, "outMs": 120, "ease": "cubic-bezier(0.2,0,0.2,1)" }
},
"swipe": { "revealThresholdPx": 56, "confirmDestructive": true }
}

css
.menu{min-width:208px;padding:8px;border-radius:12px;box-shadow:var(--elev-3);background:var(--bg-elevated)}
.menu [role^="menuitem"]{height:36px;padding:0 12px;display:flex;gap:8px;align-items:center;border-radius:10px}
.menu [role^="menuitem"]:hover,
.menu [role^="menuitem"][tabindex="0"]{background:var(--bg-hover)}
.menu [data-danger="true"]{color:var(--role-danger)}

13) Component patterns

Cards/tiles: icon '⋯' in the upper right corner; on hover - shown, on touch - always visible.
Table rows: '⋯' in the last column; in case of multiple selection - the panel of batch actions from top/bottom.
Chat/notification lists: swipe-actions (archive/read/delete) with undo.
Media galleries: long tap → multi-select mode + bottom action panel.

14) The specifics of iGaming

quick bet: in the context menu of the coefficient - "Put X" (pre-settings), "Add to coupon," "Subscribe to change the coefficient." Confirmation/undo is required.

Favorites/subscriptions: "Add provider/game to favorites," "Subscribe to the tournament."

Cash out: with inline confirmation and current amount; available only with market status.
Moderation/reports: "Complain," "Block chat" - safe, visible by role.
Responsible game: "Set a limit," "Pause 24h" - without aggressive colors, with a clear description of the consequences.

15) Anti-patterns

Critical actions are hidden only in the context menu.
Items without text (only icons), especially in lists.
Accidental closure of the cursor when switching to the submenu (no delay/corridor).
The menu overlaps the source item or goes behind the screen (no flip/shift).
Destructive without confirmation/undo.
Non-obvious rights (the clause disappears without explanation).

16) QA checklist

Availability

• 'role = "menu "'/' menuitem'are correct, roving tabindex and arrows work.
• Esc closes the menu, focus returns to the source.
• Contrast and focus rings correspond to AA.

Behavior

• The order of items reflects frequency and risk; destructive at the bottom.
• Positioning takes into account edges (flip/shift); fast animations (≤ 200 ms).
• The submenu is opened by ArrowRight and does not "tremble" (hover-intent 80-120 ms).

Mobile

• Long-press with haptics; bottom-sheet is comfortable with your thumb.
• Swipe-actions have undo; click areas ≥ 44 × 44.

Safety

• Confirmation/undo for dangerous actions; the reasons for disabled are clear.
• No private data leak in hints/labels.

Metrics

• CTR/time to click is removed; misclick/undo are monitored.

17) Implementation: open/close and click-out

js const btn=document.getElementById('more'), menu=document.getElementById('menu-1');
const open=()=>{ menu.hidden=false; btn.setAttribute('aria-expanded','true'); menu.querySelector('[role^="menuitem"]').focus(); };
const close=()=>{ menu.hidden=true; btn.setAttribute('aria-expanded','false'); btn.focus(); };
btn.addEventListener('click', e=>{ menu.hidden?open():close(); });
document.addEventListener('pointerdown', e=>{ if(!menu.hidden &&!menu.contains(e.target) && e.target!==btn) close(); });
window.addEventListener('blur', close);

18) Documentation in the design system

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Dimension/row height/radius/animation tokens.
Accessibility guides (ARIA, keyboard, typeahead).
"Do/Don't" with examples of grouping, positioning and confirmations.

Brief summary

Context menus and quick actions speed up work if they are predictable, accessible and safe: two call paths, clear labels with icons, reasonable grouping, confirmation/undo for risk, correct keyboard navigation and clear positioning. Capture tokens and patterns in the design system - and users will act quickly without fear of making a mistake.