Nav that stretches

A dark pill of icons. The active item stretches to show its label; the item marked `menu` turns the pill into a list.

Nav that stretches is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Split viewTwo panes with a draggable handle. Each pane re-lays itself out for its own width (container queries in the CSS: grid or list on the left, compact or full on the right).
Fold sidebarA navigation panel that folds to an icon column. The labels leave first, the panel closes over the fixed icon column, and the highlight pill lands as a rounded square (and back when it opens).
Icon tabsA pill of icon tabs. The picked tab opens to show its name while a light tile springs under it, and the panel line below, when tabs carry one, swaps with a small blur.
Capsule listAn inset grouped settings card. Each row shows a chip icon, a title and its current value; pressing one opens two lines of detail inside the same card (the others close), the chevron turns a quarter.
Ruler navA contents rail drawn as short lines. One label pill follows the pointer and snaps to the nearest section; the lines near it lengthen, click (or arrow keys) sets the current section and its line fills.
Command barOne surface that springs from a small "Search" pill into a full field with a command list under it. Type to filter, arrows move a highlight that glides between rows, Enter runs a command; the pill then confirms what was done.