Aurora Shimmer
Buttons
Glass Dock Nav
A glassy, pill-shaped dock navigation strip with a sliding highlight.
Customize
ADVERT
Overview
Glass Dock Nav gives you a compact, glassy navigation strip that feels like a dock. Each item sits inside a pill-shaped bar with a subtle glow, while a sliding highlight and gentle 3D tilt on pointer movement keep it feeling modern and interactive.
Props
Use the props below to customise the glass dock nav in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| items | { id: string; label: string }[] | No | [{ id: "overview", label: "Overview" }, { id: "analytics", label: "Analytics" }, { id: "billing", label: "Billing" }, { id: "settings", label: "Settings" }] | Array of navigation items to render inside the dock. Each item needs a unique id and a label. |
| activeId | string | No | undefined | Optional controlled active item id. When provided, the component treats this as the source of truth and calls onChange when items are clicked. |
| onChange | (id: string) => void | No | undefined | Optional callback fired when an item is clicked with the new active item id. |
| colors | string[] | No | ["#020617", "#22d3ee"] | Array of up to two hex colors used for the dock background and highlight accent. |
| intensity | number | No | 0.9 | Overall strength of the sliding highlight under the active item. |
| tilt | number | No | 1 | How much the dock tilts in 3D as you move the pointer across the component. |
| minHeight | number | string | No | 120 | Minimum height for the dock container. Accepts a number (pixels) or any valid CSS height string. |
| className | string | No | undefined | Optional custom class name for the root container so you can control outer layout and spacing. |
Related React components
More components from the same category or sharing similar tags.
