Navigation

Expanding card navbar

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

Using Expanding card navbar

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

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: cardCount, accentColor, ease

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.

2120Chameleon pill navbarNavigationA row of nav links in one dark capsule where the active link splits into its own pill and the rest close back up around it.

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.

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.

2163Grouped settings dropdownNavigationA button-triggered dropdown with labeled sections, a nested submenu, and a radio group for picking one of several settings values.

2366Hover slide nav labelsNavigationA 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.