Blocks
A public mega-menu that collapses to a drawer when it stops fitting.
The main-menu block is the navigation across the top of a public site: a mega-menu with grouped sections on a wide screen, a drawer on a narrow one, and the switch between them decided by measurement rather than a breakpoint.
Hover or click Shop for a grouped panel, Fitting for a plain dropdown. Narrow the window and the whole thing becomes a drawer.
A menu is a nested array of items, and each top-level item picks its own shape from what it holds:
So a site restructures its navigation by editing data, and nothing about the components changes. A section can carry a description above its columns, and a featured item renders as an image tile beside them.
A breakpoint is a guess about how wide the menu is. This one watches the bar and the navigation with a ResizeObserver and swaps to the drawer the moment the links stop fitting — so a site that adds a section, or a translation that makes every label longer, collapses at the width where it actually needs to rather than at the width someone once assumed.
Until the first measurement lands, the desktop menu is hidden rather than removed. Something with display: none measures zero and would never expand again.
Every link is a plain anchor by default, so the menu works in a project that does not own the routes it points at. A host that does supplies its own router component once, at the top, and every link inside becomes that instead.