Menu

Component · overlay

Liquid glass context menu

Menu at the pointer.

A standalone context menu with shortcuts, a divider and a disabled command, 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
Profile
bevel
Bezel (px)
16–18 (= radius)
Displacement (px)
0.4 × bezel (6.5–7)
Blur (px)
10–16

Geometry. as menu; opens at the pointer offset 4 px

Rules2
  • Same material as menu — it is a menu, not a new component.
  • Glass, not a dark opaque panel: current platforms render context menus as frost glass over the dimmed content.
Anatomy3
  • glass panel
  • grouped flat rows
  • separators
States2
  • open
  • row highlight

Questions

What material is a liquid glass context menu?

Frost material with a bevel edge profile, in the overlay layer. Menu at the pointer.

How big is a liquid glass context menu?

As menu; opens at the pointer offset 4 px.

What bezel, displacement and blur does it use?

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

Which states does a liquid glass context menu need?

Open; row highlight.