Animated Hamburger Navbar Block for React

Edit PAGES at the top of the file: each page is a label, a one-line description and an href, and current: true marks the page you're on, which gets aria-current="page" and a tint (compute it from your router instead if you have one). The card lays them out in one column on a phone, two from the sm breakpoint and three from lg, so six or nine links fill it evenly; keep each description to one short clause.

It's three spans, each a 2-pixel line. The button's own aria-expanded drives them (group-aria-expanded/menu: classes): the top line moves down and turns 45 degrees, the bottom one moves up and turns the other way, and the middle one shrinks away, all over 300 ms with CSS transitions on translate, rotate, scale and opacity. Nothing is measured and no animation library is involved. With reduced motion the lines change at once.

Each link's li gets its position in a CSS variable (--i) and waits --i × 45 ms + 80 ms before it slides in from the start edge and fades up, so the six land over about 350 ms. Closing the card is not staggered: everything fades together. The slide follows the reading direction, so it comes from the other side in right-to-left layouts, and with reduced motion the links are simply there when the card opens.

The button is named Menu and says whether it's expanded; its aria-controls points at the card, a nav landmark named Main. While the card is closed it is inert and invisible, so Tab goes straight past it and a screen reader doesn't read it; open, Tab walks into its links. Escape closes the card and puts focus back on the button, clicking outside it or tabbing out of the header closes it too, and choosing a link closes it so a client-side route change doesn't leave it open over the next page. This is plain markup and the same on every target. Shine Button renders the link it's given with render, with nativeButton={false}.

Yes. Add md:hidden to the menu button and to the card, and a nav with the same links (from PAGES) and max-md:hidden on the bar next to the wordmark. This block keeps the button at every width so the menu is what you see in a gallery.

It's the page's first block: its + marks and rails line up with every block under it, its top rule falls on the window's top edge (or between it and a banner above it), and the card opens over the page so nothing below moves. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the card then rides along under it. Every link points at #: point them at your pages.