Navigation

Hover slide nav labels

A vertical navigation list where hovering or focusing a label slides a duplicate copy up into view while the original slides out, so the label appears to refresh itself.

Using Hover slide nav labels

A vertical navigation list where hovering or focusing a label slides a duplicate copy up into view while the original slides out, so the label appears to refresh itself.

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: items, slideSeconds, accent

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2309Bubble burst menuNavigationA floating logo pill and toggle that expand into a full screen overlay of oversized pill links, each bursting into place with a springy stagger.

2318Circle reveal sidebarNavigationA menu panel that opens as a circle growing out of its own toggle, with rows springing up in sequence and the toggle bars folding into a cross.

2365Hover duplicate text navNavigationA vertical nav list slides each label upward and off the top on hover while a duplicate label slides in from below to take its place.

2111Auto-Hide Nav BarNavigationA sticky top bar that slides up out of view as the visitor scrolls down and slides back in as soon as they scroll up.

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.

2349Expanding card navbarNavigationA slim rounded navbar whose hamburger toggle expands it downward into a row of colored link cards, each card's links staggering into view.