# Main menu (/product/blocks/main-menu)



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.

## Live

Hover or click **Shop** for a grouped panel, **Fitting** for a plain dropdown. Narrow the window and the whole thing becomes a drawer.

_The main-menu block renders live on this page._

## One tree, three shapes

A menu is a nested array of items, and each top-level item picks its own shape from what it holds:

* no children — a plain link in the bar
* children — a dropdown list
* children that have children of their own, or a featured item — a mega panel with columns

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.

## The fit is measured, not guessed

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.

## Links

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.

- [All blocks](/product/blocks) — What a block is, what it may import, and how your data reaches it.