# Liquid glass navigation bar: spec and references

Source: https://meniscus.site/components/navigation-bar · Updated 2026-09-27

Top navigation / site nav strip. Layer: controls (floating).

Also called: navigation menu, top bar, header, app bar, nav.

| Property | Value |
|---|---|
| Material | regular |
| Profile | squircle |
| Geometry | capsule 40–48 tall floating 8–12 below the top safe area; or iOS large title with glass buttons at the corners |
| Bezel (px) | 20 |
| Displacement (px) | 35–40 |
| Blur (px) | 2–6 |

## Anatomy

- glass capsule
- flat items (text + chevrons)
- leading/trailing glass circle buttons

## States

- rest
- item hover/press
- open submenu: separate glass popup 6–8 px below

## Rules

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

## References

![A collection page whose hero of zoomed desert ridges carries a floating capsule navigation bar and a separate round search button.](https://meniscus.site/gallery/navigation-bar-light-studio.webp)

![A collection page whose hero of a zoomed night skyline carries a floating capsule navigation bar and a separate round search button.](https://meniscus.site/gallery/navigation-bar-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_component_spec` tool returns for `navigation-bar`. 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