Menus And Actions
Menus
A compact action list where the trigger and choices stay in one context — the canonical flyout, toggled open/closed by a single class.
Findings
What's actually in /ig
- .uiToggleFlyout,.toggleTargetClosed{display:none} and the paired .openToggler .uiToggleFlyout{display:block} rule define the entire open/closed model — one ancestor class flips visibility, no JS-driven height animation.
- Shares its visual surface with Context Menus (._54ng) and Popovers (.uiContextualLayer).
Usage
When to use it
Use when
Use for a list of related actions surfaced by any non-right-click trigger, including a button, chevron, overflow icon, or compact selector trigger.
Avoid when
Avoid for object-specific right-click behavior, which is a Context Menu, or for touch-first bottom action lists, which should use Action Sheets.
Anatomy
Anatomy
- 01
Trigger (.openToggler)
- 02
Flyout (.uiToggleFlyout)
- 03
Action rows
Specification
Spacing, colour, type, and motion
- Surface
- Same as Context Menus: #fff, 1px rgba(0,0,0,.15) border, 0 3px 8px rgba(0,0,0,.3) shadow
- Visibility
- .uiToggleFlyout hidden by default; .openToggler displays it
- Row height
- ~36px compact action row
- Leading icon
- Optional 16px icon aligned before row label
- Separator
- Thin separator row between action groups
States
States
| State | Behaviour |
|---|---|
| Hidden | The flyout is display:none through .uiToggleFlyout or .toggleTargetClosed. |
| Open | A single .openToggler ancestor flips the flyout to display:block. |
| Row hover | Hovered rows highlight without animating the flyout surface. |
| Row pressed | Pressed rows hold a stronger row highlight until activation. |
| Row with icon | Rows can include a leading 16px icon while keeping the same compact height. |
| Separator row | A non-action separator divides groups without receiving hover or pressed states. |
Examples
Real interface compositions
Comments
Comment action flyout
A long-press or overflow trigger reveals Reply, Pin, Restrict, and Delete; the flyout appears from the toggled ancestor state rather than running a bespoke reveal animation.
.openToggler display switch, .uiToggleFlyout, shared menu surface
Guidance
Usage guidance
- The open/closed model is a single toggled ancestor class, not a height or opacity transition — menus appear and disappear instantly in the legacy system.
Do / Don't
Do / Don't
Do
- Toggle visibility via a single ancestor class, matching the evidenced model.
Don’t
- Add an animated open/close transition to this specific legacy menu model — it appears and disappears by display state.