# Liquid glass sidebar: spec and references

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

Persistent navigation on large screens. Layer: controls (floating inset panel).

Also called: side navigation, drawer nav, source list.

| Property | Value |
|---|---|
| Material | frost |
| Profile | squircle |
| Geometry | full-height column flush with the window's leading edge (current generation), width 240–300, continuous corner only where it meets the window corner; the first generation floated it as an inset panel, radius 24–28, 8–12 from the window edges |
| Bezel (px) | 24 |
| Displacement (px) | 50–60 |
| Blur (px) | 12–20 |

## Anatomy

- frosted panel
- flat rows 32–36 tall
- selected row: tint pill

## States

- rest
- row hover
- row selected

## Rules

- Content behind it (e.g. a hero image) should extend under the sidebar.
- Row icons carry the app's accent colour; the selected row is a tint or lens pill inset 8 from the column edges.

## References

![A full-height frosted library sidebar flush with the window edge, with section labels, accent icons, counts and a selected row, over a procedural backdrop.](https://meniscus.site/gallery/sidebar-light-studio.webp)

![A full-height frosted library sidebar flush with the window edge, with section labels, accent icons, counts and a selected row, over a procedural backdrop.](https://meniscus.site/gallery/sidebar-dark-studio.webp)

## Use it with your assistant

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