Menu

Component · overlay

Liquid glass menu

Command list opened from a trigger.

An action menu hanging below its capsule trigger, with icons, shortcuts, dividers and a destructive row, over zoomed desert ridges.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
frost (long) · regular (short)
Profile
bevel
Bezel (px)
16–18 (= radius)
Displacement (px)
0.4 × bezel (6.5–7)
Blur (px)
8–14

Geometry. radius 14–18, min-width 200, rows 30–34, padding 6, separators 1 px, section labels 11 px caps

Rules2
  • Trigger and popup are two lenses kept apart: 6–8 px gap.
  • Rows are flat; only the panel refracts.
Anatomy5
  • glass panel
  • flat rows (label, shortcut right-aligned secondary)
  • checked items ✓
  • destructive row red text
  • submenu chevron
States4
  • closed
  • open: grows from the trigger (0.92 → 1)
  • row highlight: flat tint pill
  • disabled 40 %

Questions

What material is a liquid glass menu?

Frost (long) · regular (short) material with a bevel edge profile, in the overlay layer. Command list opened from a trigger.

How big is a liquid glass menu?

Radius 14–18, min-width 200, rows 30–34, padding 6, separators 1 px, section labels 11 px caps.

What bezel, displacement and blur does it use?

Bezel 16–18 (= radius); displacement 0.4 × bezel (6.5–7); blur 8–14 (px).

Which states does a liquid glass menu need?

Closed; open: grows from the trigger (0.92 → 1); row highlight: flat tint pill; disabled 40 %.