Free Component

macOS Style Floating Dock

A floating desktop icon dock inspired by macOS. Icons magnify smoothly on cursor hover with dynamic tooltips and an active dot indicator.

dark
dock
menu
navigation
macos
floating
hover

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="dock-container">
  <nav class="dock" id="macosDock">
    <a href="#" class="dock-item" data-title="Finder">
      <span class="dock-icon">📁</span>
      <span class="dock-dot"></span>
    </a>
    <a href="#" class="dock-item" data-title="Terminal">
      <span class="dock-icon">⚡</span>
      <span class="dock-dot"></span>
    </a>
    <a href="#" class="dock-item is-active" data-title="Code Editor">
      <span class="dock-icon">💻</span>
      <span class="dock-dot"></span>
    </a>
    <a href="#" class="dock-item" data-title="Browser">
      <span class="dock-icon">🌐</span>
      <span class="dock-dot"></span>
    </a>
    <span class="dock-divider"></span>
    <a href="#" class="dock-item" data-title="Music">
      <span class="dock-icon">🎵</span>
      <span class="dock-dot"></span>
    </a>
    <a href="#" class="dock-item" data-title="Settings">
      <span class="dock-icon">⚙️</span>
      <span class="dock-dot"></span>
    </a>
    <div class="dock-tooltip" id="dockTip">Finder</div>
  </nav>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a macOS-style floating icon dock with magnification effect in HTML, CSS and vanilla JavaScript.

Requirements:
- Centered dock with frosted glass backdrop (backdrop-filter: blur, rounded 22px border, soft shadow).
- 6 icon items separated by a subtle vertical divider line.
- Smooth scale-up magnification (1.3x) with upward translation when hovering over an item.
- Tooltip pill that floats directly above the hovered icon with the app title.
- Small white active dot indicator underneath running apps.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Style the dock container with fixed or centered flexbox and frosted glass aesthetics.
2
Add icon tiles with subtle gradients and shadows.
3
Calculate horizontal center of hovered element to position the shared tooltip precisely.
4
Use transform: scale() and translateY() for fluid elevation.

Customisation tips

Keep transform-origin at bottom center so icons expand upward rather than overflowing downwards.
Add tactile click bounce with transform: scale(0.95) on active state.