# Flux 2.0 — Action menu

A short list of actions behind one button, for a record or a toolbar.

Reference: https://flux.kaptio.com/components/menu/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
Gathers the less frequent actions for one thing — a booking, a row, an export — behind a single trigger, so the frequent action can stay a visible button beside it. It is a popover with role="menu": the platform gives it light dismiss, Escape and focus return, and flux-components.js places it below its trigger and moves through it with the arrow keys. Separators group related actions, and a destructive action sits last, in text-error.

## Do not use it when
Not for choosing a value; use a Select. Not for navigation between pages; use links. Not for the one action someone came to take; make that a button. Not for a single action; show it as a button.

## Markup

### Record actions

<button class="flux-button flux-button--secondary" type="button">Edit booking</button>
<button class="flux-button flux-button--secondary" type="button" popovertarget="booking-actions" aria-haspopup="menu" aria-expanded="false">More actions<svg class="flux-button__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg></button>
<div class="flux-menu" id="booking-actions" popover role="menu" aria-label="Actions for KB-104931">
  <button class="flux-menu__item" type="button" role="menuitem">Duplicate</button>
  <button class="flux-menu__item" type="button" role="menuitem">Send confirmation</button>
  <button class="flux-menu__item" type="button" role="menuitem" aria-disabled="true">Send manifest</button>
  <div class="flux-menu__separator" role="separator"></div>
  <button class="flux-menu__item flux-menu__item--danger" type="button" role="menuitem">Cancel booking</button>
</div>

### Icon trigger

<button class="flux-table__icon-button" type="button" popovertarget="departure-actions" aria-haspopup="menu" aria-expanded="false" aria-label="More actions for DEP-0914"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="3.5" cy="8" r="1.25" /><circle cx="8" cy="8" r="1.25" /><circle cx="12.5" cy="8" r="1.25" /></svg></button>
<div class="flux-menu" id="departure-actions" popover role="menu" aria-label="Actions for DEP-0914">
  <button class="flux-menu__item" type="button" role="menuitem">Send manifest</button>
  <button class="flux-menu__item" type="button" role="menuitem">Export passenger list</button>
  <div class="flux-menu__separator" role="separator"></div>
  <button class="flux-menu__item flux-menu__item--danger" type="button" role="menuitem">Cancel departure</button>
</div>

### Checkable items

<button class="flux-button flux-button--secondary" type="button" popovertarget="calendar-show" aria-haspopup="menu" aria-expanded="false">Show<svg class="flux-button__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg></button>
<div class="flux-menu" id="calendar-show" popover role="menu" aria-label="Show on the calendar">
  <button class="flux-menu__item" type="button" role="menuitemcheckbox" aria-checked="true"><svg class="flux-menu__check" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8L6.5 11.5L13 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>Departures</button>
  <button class="flux-menu__item" type="button" role="menuitemcheckbox" aria-checked="true"><svg class="flux-menu__check" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8L6.5 11.5L13 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>Supplier deadlines</button>
  <button class="flux-menu__item" type="button" role="menuitemcheckbox" aria-checked="false"><svg class="flux-menu__check" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8L6.5 11.5L13 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>Public holidays</button>
</div>

## API
- flux-menu (class): On the popover, with popover, role="menu" and an aria-label. Requires flux-components.js for placement and arrow keys.
- flux-menu__item (class): A button with role="menuitem", or role="menuitemcheckbox" with aria-checked and a flux-menu__check icon.
- flux-menu__item--danger (class): A destructive action, in text-error. Last, after a separator.
- flux-menu__separator (class): A div with role="separator" between groups.
- aria-disabled="true" (attribute): On an item that is unavailable. It stays focusable and announced, and does nothing when chosen.
- popovertarget (attribute): On the trigger, naming the menu’s id. Add aria-haspopup="menu" and aria-expanded="false".

## Accessibility
- Give the menu an aria-label that names the record, and the icon trigger an accessible name that does the same.
- Use aria-disabled rather than disabled on an unavailable item, so it is still reached and announced.
- A destructive item opens a confirmation Modal that names the consequence; it never acts on its own.
- The menu closes when the page scrolls, so it never floats away from its trigger.

## Keyboard
- Enter / Space: On the trigger, opens the menu. On an item, chooses it and closes the menu, returning focus to the trigger.
- ↓ ↑: Moves to the next or previous item, wrapping at the ends.
- Home / End: Moves to the first or last item.
- Escape: Closes the menu and returns focus to the trigger.
- Tab: Closes the menu and moves on.

## Tokens
- --flux-menu-bg | -border | -shadow | -radius | -padding | -min-width
- --flux-menu-item-padding-x | -item-padding-y | -item-hover | -item-font-size
- --flux-menu-separator | -item-danger | -offset

## Do
- Keep the frequent action as a visible button beside the menu.
- Order items by how often they are used, and group them with separators.
- Name each item with a verb and its object: "Send manifest".

## Do not
- Do not put a single action in a menu.
- Do not nest menus.
- Do not let a destructive item act without a confirmation.
- Do not hide an unavailable action. Leave it in place and unavailable, so the menu keeps its shape.