Mobile menus built with Claude

Push, not expand. Tapping a section slides the current level off to the left while its submenu comes in from the right. A deep menu never turns into a long scroll, and the back row walks you home one level at a time.

Depth is markup. Every level is a pane with a parent attribute; a small array tracks where you are. Adding a fourth level means adding a pane — no code changes, no configuration.

Two-stage morph. The hamburger bars translate together first, then rotate into the cross, and reverse on close. It is the small timing detail that separates a considered menu from a default one.

Even distribution. Items divide whatever height is left after the bar and title, so a four-item level and a six-item level both look composed without per-menu spacing tweaks.

Keyboard and motion. Escape steps up a level before it closes, focus rings stay visible, and a reduced-motion preference collapses every transition to an instant state change.

Themed by variable. Colour, bar height and easing are CSS custom properties at the top of the file, with a dark scheme already wired. Rebranding it is a handful of values.