Menu

Component · controls (floating)

Liquid glass vertical rail

Primary navigation and the main action on one edge, for landscape phones, foldables and wide windows.

A landscape phone with a vertical glass rail along the leading edge over a dune hero: back, a solid blue add button, four labelled destinations with the library selected in a pill, and flat media cards beside it.

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

Geometry. vertical capsule 56–64 wide (60), radius w/2, floating 8–12 px from the leading edge and from the top and bottom of the safe area; top to bottom: back or close 44, the one prominent action 44 (a flat solid accent disc), 3–5 destinations 48 × 50 (icon 20 + label 10), then a trailing group pinned to the bottom (settings, profile); 12–16 px of space between groups, no separators

Rules4
  • The tab bar turned on its side: use it where a bottom bar would stretch too wide (landscape, foldables, wide windows); never show both.
  • Groups are set apart by space, not lines; the prominent action is a flat solid disc inside the rail.
  • The selected pill is the one lens inside the rail; selected icon and label use the accent text colour (#143FA8 light / #C4D7FF dark), the others primary text.
  • Full-bleed content (a hero, media) runs under the rail so its bezel has something to bend; text content starts beside it.
Anatomy6
  • glass capsule on the leading edge
  • back or close
  • one prominent action: a flat solid accent disc with a white glyph, not a second lens
  • flat destinations, icon over label
  • selected destination: a lens pill (the moving indicator) with its icon and label in the accent text colour
  • trailing group pinned to the bottom
States4
  • rest
  • selected: the pill slides vertically with a spring and stretches toward its target
  • press: item fill white 34 % / 10 %
  • scrolled: content keeps running under the rail

Questions

What material is a liquid glass vertical rail?

Regular material with a bevel edge profile, in the controls (floating) layer. Primary navigation and the main action on one edge, for landscape phones, foldables and wide windows.

How big is a liquid glass vertical rail?

Vertical capsule 56–64 wide (60), radius w/2, floating 8–12 px from the leading edge and from the top and bottom of the safe area; top to bottom: back or close 44, the one prominent action 44 (a flat solid accent disc), 3–5 destinations 48 × 50 (icon 20 + label 10), then a trailing group pinned to the bottom (settings, profile); 12–16 px of space between groups, no separators.

What bezel, displacement and blur does it use?

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

Which states does a liquid glass vertical rail need?

Rest; selected: the pill slides vertically with a spring and stretches toward its target; press: item fill white 34 % / 10 %; scrolled: content keeps running under the rail.