Menu

Component · controls (floating inset panel)

Liquid glass sidebar

Persistent navigation on large screens.

A full-height frosted library sidebar flush with the left edge of the frame, with rounded corners, section labels, accent icons, counts and a selected row, over a procedural backdrop.

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)
20–24 (= radius)
Displacement (px)
0.4 × bezel (8–9.5)
Blur (px)
12–20

Geometry. full-height column flush with the window's leading edge (current generation), width 240–300, continuous corner only where it meets the window corner; the first generation floated it as an inset panel, radius 24–28, 8–12 from the window edges

Rules2
  • Content behind it (e.g. a hero image) should extend under the sidebar.
  • Row icons carry the app's accent colour; the selected row is a tint or lens pill inset 8 from the column edges.
Anatomy3
  • frosted panel
  • flat rows 32–36 tall
  • selected row: tint pill
States3
  • rest
  • row hover
  • row selected

Questions

What material is a liquid glass sidebar?

Frost material with a bevel edge profile, in the controls (floating inset panel) layer. Persistent navigation on large screens.

How big is a liquid glass sidebar?

Full-height column flush with the window's leading edge (current generation), width 240–300, continuous corner only where it meets the window corner; the first generation floated it as an inset panel, radius 24–28, 8–12 from the window edges.

What bezel, displacement and blur does it use?

Bezel 20–24 (= radius); displacement 0.4 × bezel (8–9.5); blur 12–20 (px).

Which states does a liquid glass sidebar need?

Rest; row hover; row selected.