Glass Dock Nav React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import GlassDockNav from "./GlassDockNav";

export default function Example() {
  return (
    <GlassDockNav
      items={[
        {
          "id": "overview",
          "label": "Overview"
        },
        {
          "id": "analytics",
          "label": "Analytics"
        },
        {
          "id": "billing",
          "label": "Billing"
        },
        {
          "id": "settings",
          "label": "Settings"
        }
      ]}
      colors={[
        "#020617",
        "#22d3ee"
      ]}
      intensity={0.9}
      tilt={1}
      minHeight={120}
    />
  );
}

Using Glass Dock Nav

Supply navigation destinations through items and keep the selected destination in activeId.

Handle onChange in your application to perform navigation or update selection. Keep labels meaningful even when the dock uses icons.

Props

Name	Type	Required	Default	Description
items	{ id: string; label: string }[]	No	[]	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	Called when the selection or field values change.
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	Additional CSS class names, merged with base component styles.