A hamburger button that opens a slide-out menu (drawer) on mobile screens. You place the navigation items as the block's content.
Use MobileMenu in the site header wherever the regular navigation links don't fit on small screens — it collapses them behind a single hamburger button and reveals them in a slide-out drawer on tap, keeping the header compact on phones while the full menu stays visible on desktop.
A typical setup renders the same list of Link items twice: inline for desktop and wrapped in MobileMenu for small screens, toggled with responsive display props. Combine it with LanguageSwitcher inside the drawer for a complete mobile header.
Typical use cases
A webshop's mobile header often pairs MobileMenu with a cart icon and a Search trigger alongside the hamburger button, since those three actions cover most of what a mobile shopper needs without cluttering the bar. A portfolio site tends to keep the drawer itself minimal — three or four links, nothing more — because the visual work is the point and an elaborate menu would compete with it. A professional-services site frequently puts the booking or contact link at the very top of the drawer's item list, since mobile visitors are the ones most likely to tap straight through to call or schedule.
Mistakes to avoid
The most common bug is a responsive mismatch: if the desktop navigation and MobileMenu aren't toggled with complementary display breakpoints, both can end up rendering on the same screen width, doubling the navigation. Keep the two in sync — one hidden exactly where the other becomes visible. Overstuffing the drawer with every page on the site is another common trap; a mobile drawer works best as a shortlist of primary destinations, not a full sitemap. Give the trigger a persistent, recognisable label or icon so visitors can find the close action as easily as the open one, rather than relying only on tapping outside the drawer.
Because the trigger is usually icon-only, give it an accessible label — 'Open menu' — rather than leaving a bare hamburger glyph with nothing for a screen reader to announce; the visual Icon alone carries no text alternative on its own.
Keep the drawer's transition timing snappy — one that takes half a second to slide in feels sluggish on a device that's otherwise instant to touch. Because the menu is only ever one interaction away, there's little reason to load its contents any differently from the rest of the header; it renders with the page like any other block.
<MobileMenu title='Menu'> <Link href='/en/'>Home</Link> <Link href='/en/contact/'>Contact</Link> </MobileMenu>