# Liquid glass vertical rail: spec and references

Source: https://meniscus.site/components/vertical-rail · Updated 2026-10-02

Primary navigation and the main action on one edge, for landscape phones, foldables and wide windows. Layer: controls (floating).

Also called: navigation rail, nav rail, side rail, side tab bar, side toolbar.

| Property | Value |
|---|---|
| Material | regular |
| Profile | bevel |
| 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 |
| Bezel (px) | 20–24 (22 at 60 wide) |
| Displacement (px) | 0.4 × bezel (9 at bezel 22) |
| Blur (px) | 2–6 |

## Anatomy

- 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

## States

- 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

## Rules

- 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.

## Reference renders

The tool attaches these images; each shows:

- 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. (light)
- A dark landscape phone with a vertical glass rail along the leading edge over a night-city hero: back, a solid blue add button, four labelled destinations with the library selected in a pill, and flat media cards beside it. (dark)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_spec` tool returns for `vertical-rail`. Materials, colours, light and composition rules that apply to every component are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs