Menu

Component · controls (floating)

Liquid glass tab bar

Primary mobile navigation.

A phone feed with a landscape photo scrolling under an inset floating tab bar, with a selected pill and a separate search lens.

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–24
Displacement (px)
0.4 × bezel (9 at bezel 22)
Blur (px)
2–6

Geometry. floating capsule 56–64 tall, 8–16 above the bottom safe area, inset 16–24 from sides; items icon 22–24 + label 10–11; a separate circular lens for the one prominent tab (search by default, or the main action), same height, at the trailing end with 8–12 gap; leave it out when the app has neither

Rules4
  • Content scrolls under it; a scroll-edge band behind it (to 16 px above the bar) blurs 2–4 px and dims in the page colour, white ~55 % / black ~55 % at the bar, fading upward; raise the dim until labels reach 4.5:1; over content that never scrolls (a still photo) the dim alone, no blur.
  • Never full-width edge-to-edge flush bar; it floats.
  • Search (or the one prominent tab) lives in its own lens, not inside the bar, and stays visible when the bar shrinks on scroll.
  • The selected item reads at a glance: its lens pill plus icon and label in the accent colour at full opacity; the others stay primary text colour.
Anatomy4
  • glass capsule
  • 3–5 flat items
  • selected item: a lighter lens pill (white 28 % in light, white 12 % in dark: lighter than the lens token, so it reads as selected) inset 4 px, concentric radius, accent-coloured icon/label — the moving indicator, the one lens allowed inside the bar (one lens per stack; this moving indicator is its one exception); other items stay flat
  • badges: solid red capsule 16 px
States4
  • rest
  • selected
  • press
  • scrolled: may minimise to a smaller capsule

Questions

What material is a liquid glass tab bar?

Regular material with a bevel edge profile, in the controls (floating) layer. Primary mobile navigation.

How big is a liquid glass tab bar?

Floating capsule 56–64 tall, 8–16 above the bottom safe area, inset 16–24 from sides; items icon 22–24 + label 10–11; a separate circular lens for the one prominent tab (search by default, or the main action), same height, at the trailing end with 8–12 gap; leave it out when the app has neither.

What bezel, displacement and blur does it use?

Bezel 20–24; displacement 0.4 × bezel (9 at bezel 22); blur 2–6 (px).

Which states does a liquid glass tab bar need?

Rest; selected; press; scrolled: may minimise to a smaller capsule.