Sidebar Collapse
A navigation rail narrows to icons, with labels leaving before the width closes so text is never squeezed.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState, type CSSProperties } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Sidebar Collapse
*
* A navigation rail that narrows to icons and back. The labels fade out
* *before* the width starts closing, and fade back in only once it hasAbout this pattern
The rail that gives a workspace back its horizontal space. The mechanism is ordering, not easing: collapsing fades the labels out first and only then closes the width; expanding opens the width first and brings the labels back after. That single delay is the difference between a rail that feels engineered and one where words visibly compress, wrap and clip on the way in. Width is the one property that genuinely has to animate, so it runs as a short eased tween rather than a spring — a spring would overshoot the rail past its own resting size — while the icons hold the same centre line throughout, giving the eye a fixed anchor as everything else moves.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
The left navigation collapses to a narrow icon rail and back.
Related patterns
- Nested Menu DrillA submenu pushes the parent list aside inside the same panel, and the panel resizes to fit it.
- Split View ResizeDragging the divider resizes both panes live, and releasing it settles the split on the nearest stop.
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.