Menus And Actions

Context Menus

An object-specific action list anchored to a trigger — Instagram's legacy .uiContextualLayer system.

Documented in /igMenus And Actions

Findings

What's actually in /ig

.uiContextualLayer{position:absolute} plus .uiContextualLayerPositioner/.uiContextualLayerPositionerFixed form the anchoring system.
._54ng{background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:3px;box-shadow:0 3px 8px #0000004d} is the resulting flyout surface.
Disabled rows in this system drop to 55% opacity rather than being removed (._5arm ._54nc{opacity:.55}).

Usage

When to use it

Use when

Use for object-specific actions triggered by right-click or a '...' affordance, especially actions scoped to one post, row, or media item.

Avoid when

Avoid for global navigation or large, task-taking surfaces; use Tab Bars, Sidebars, Modals, or Sheets depending on scope.

Anatomy

01
Trigger
02
Contextual layer (positioned, z-index 202)
03
Action rows
04
Separator

Specification

Spacing, colour, type, and motion

Radius: 3px
Background: #fff
Border: 1px solid rgba(0,0,0,.15)
Shadow: 0 3px 8px rgba(0,0,0,.3)
Layer: z-index: 202 on the contextual layer

States

Interaction states for Context Menus
State	Behaviour
Hidden	Layer is not rendered or is display:none until the trigger opens it.
Open	The contextual layer is positioned below or above the trigger using the Positioner/PositionerFixed model.
Row hover	The hovered action row highlights while the flyout surface stays fixed.
Row pressed	The row uses a pressed highlight until the command fires or the pointer is released.
Disabled row	Unavailable actions remain visible at 55% opacity.

Examples

Real interface compositions

Feed actions

Post overflow menu

The three-dot trigger anchors a compact menu with Save, Share to, Copy link, and a dimmed 'Report' row when reporting is unavailable for the current account state.

.uiContextualLayer anchoring, 3px radius, 1px rgba border, disabled opacity .55

Guidance

Usage guidance

Anchor the layer with position logic relative to the trigger, not a fixed screen position — that's what the Positioner/PositionerFixed split exists for.
Dim disabled items to ~55% opacity rather than hiding them.

Do / Don't

Do

Use a 3px radius and the documented 1px rgba border + soft shadow for the flyout surface.

Don’t

Remove disabled actions from the list — the evidenced pattern keeps them visible and dimmed.

Code

Evidence-backed CSS

Context Menus — derived from /ig

.context-menu {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.context-menu__item[disabled] { opacity: .55; }