Navigation

Magnifying icon dock

A macOS-style dock of circular icon buttons that grow smoothly as the pointer nears them and reveal a label above the active icon.

Using Magnifying icon dock

A macOS-style dock of circular icon buttons that grow smoothly as the pointer nears them and reveal a label above the active icon.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: baseItemSize, magnification, itemCount

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

1528Dock menuNavigationA bottom dock whose icons take their size from the pointer distance, with a label above the icon under the cursor and a dot under the active one.

2162Grouped magnify dockNavigationA bottom dock of round icon buttons split into two clusters that grow the closer the pointer gets to each one.

2188Magnifying icon dockNavigationA row of app icons in a translucent bar that grow larger the closer the pointer gets to each one, easing back to normal size when the pointer leaves.

2212Quick launch paletteNavigationA keyboard-triggered command palette that opens with a spring pop, filters a grouped action list as you type, and supports full arrow-key navigation.

2106Adjacent hover menubarNavigationA desktop-style menu bar where clicking one menu opens it, and once open, hovering any adjacent menu switches straight to that one without an extra click.

2107App MenubarNavigationA desktop-style horizontal menu bar where clicking a top-level label opens its dropdown, and once one is open, hovering across the other labels switches directly to their menus without an extra click.