ui-patterns component

Expanding Icon Tabs

A compact navigation toolbar where the active icon expands into a readable label.

About this component

A compact navigation toolbar where the active icon expands into a readable label.

Interaction: Click a tab to reveal its label; Arrow Left and Arrow Right move focus, Escape collapses the active tab, and pointer input outside the toolbar clears it.

Dependencies: react, lucide-react

Source or install: Copy source from the preview. This example is not available in the Mova CLI registry.

Explore related components

React UI patterns for expressive interfaces
Animated Tags
Gooey Popover

Built for readable source and real interaction

Open a component to preview its states, read the usage details, and copy the source or supported Mova CLI command. The page remains useful as a text document before the interactive preview loads.