Menu

Component · controls

Liquid glass menubar

Row of menus (desktop).

A desktop menu strip with one item open into a dropdown of shortcuts, dividers and disabled items, 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
regular
Profile
bevel
Bezel (px)
16
Displacement (px)
0.4 × bezel (6.5)
Blur (px)
2–4

Geometry. capsule 32–36 tall, flat triggers File / Edit / View

Rules3
  • The strip is the lens; triggers flatten inside it.
  • Popups sit closer (6 px) than free menus.
  • Desktop only — on mobile use a tab bar or toolbar.
Anatomy3
  • one glass strip
  • flat triggers
  • menus open as separate lenses close below
States2
  • rest
  • trigger open: flat highlight pill

Questions

What material is a liquid glass menubar?

Regular material with a bevel edge profile, in the controls layer. Row of menus (desktop).

How big is a liquid glass menubar?

Capsule 32–36 tall, flat triggers File / Edit / View.

What bezel, displacement and blur does it use?

Bezel 16; displacement 0.4 × bezel (6.5); blur 2–4 (px).

Which states does a liquid glass menubar need?

Rest; trigger open: flat highlight pill.