Menu

Component · controls (floating)

Liquid glass navigation bar

Top navigation / site nav strip.

A collection page whose hero of zoomed desert ridges carries a floating capsule navigation bar and a separate round search button.

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)
20
Displacement (px)
0.4 × bezel (8)
Blur (px)
2–6

Geometry. capsule 40–48 tall floating 8–12 below the top safe area; or iOS large title with glass buttons at the corners

Rules2
  • Scroll-edge fade where content passes under it.
  • Once content has scrolled under, one uniform soft band spans the full width behind the bar items (bar height + 16–24, fading downward), not a halo per item.
Anatomy3
  • glass capsule
  • flat items (text + chevrons)
  • leading/trailing glass circle buttons
States3
  • rest
  • item hover/press
  • open submenu: separate glass popup 6–8 px below

Questions

What material is a liquid glass navigation bar?

Regular material with a bevel edge profile, in the controls (floating) layer. Top navigation / site nav strip.

How big is a liquid glass navigation bar?

Capsule 40–48 tall floating 8–12 below the top safe area; or iOS large title with glass buttons at the corners.

What bezel, displacement and blur does it use?

Bezel 20; displacement 0.4 × bezel (8); blur 2–6 (px).

Which states does a liquid glass navigation bar need?

Rest; item hover/press; open submenu: separate glass popup 6–8 px below.