# Liquid glass toolbar: spec and references

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

Group of related actions. Layer: controls.

Also called: toggle group, action bar, format bar, bottom toolbar.

| Property | Value |
|---|---|
| Material | regular |
| Profile | squircle |
| Geometry | capsule 36–44 tall; items 28–32; 1 px separators between groups; optional inset field |
| Bezel (px) | 18–20 |
| Displacement (px) | 30–40 |
| Blur (px) | 2–4 |

## Anatomy

- one glass capsule strip
- flat icon/text buttons
- active item solid accent or tint
- separators 1 px white 25 %

## States

- rest
- item active
- item press

## Rules

- The strip is the lens; items are flat — do not frost every glyph.
- Inset search field inside a toolbar is a darker flat trough, not a second lens.
- A top toolbar gets the same uniform scroll-edge band as the navigation bar once content scrolls under it; items that do not fit go into one overflow (…) menu at the trailing end.

## References

![A glass formatting toolbar with text-style, alignment and list groups split by hairlines, two items selected, over a procedural backdrop.](https://meniscus.site/gallery/toolbar-light-studio.webp)

![A glass formatting toolbar with text-style, alignment and list groups split by hairlines, two items selected, over a procedural backdrop.](https://meniscus.site/gallery/toolbar-dark-studio.webp)

## Use it with your assistant

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