React
Mobile-ready navbar: the React component that does not break
The mobile navbar problem is not the menu: it is focus, scroll and tap targets. Three patterns, the 390px checks and code for a navbar that stays usable.
Key points
- Pick a pattern, not a generic “responsive” navbar.
- Focus, Escape and scroll lock matter more than the animation.
- At 390px the minimum tap target is 44px and the thumb must reach the menu.
A mobile navbar breaks in predictable ways: the menu stays open under the content, focus jumps back to the top of the page, the body scrolls behind the drawer, the tap target is 24px. None of these problems shows up in a desktop screenshot.
Decide the pattern before you pick a component. Then test the keyboard behaviour and the layout at 390px.
Three patterns, three contexts
| Pattern | When to use it | What to check |
|---|---|---|
| Hamburger + drawer | Sites with many links | Focus trap, Escape, scroll lock |
| Bottom navigation | App with 4–5 main actions | Tap target, iOS safe area |
| Full-screen menu | Marketing or portfolio | Return to the opening point, a clear close |
The real problem is focus
When a menu opens, focus must move into it. When it closes, focus must return to the button that opened it. A drawer makes the page behind it inert; a full-screen menu needs a visible way out and a keyboard one.
- Escape closes the menu.
- A click outside closes it only when no data is lost.
- Focus never jumps back to the top of the page.
- The body does not scroll behind the menu.
- The button has an accessible name, not just an icon.
Scroll lock and safe area
On iOS, overflow: hidden on the body is not always enough. You also need to manage the scroll position and the safe-area-inset-bottom when the navbar sits at the bottom. If the menu holds a form, do not block the virtual keyboard: the field must stay visible.
The 390px test
Open the page at 390×844. Reach every link with your thumb without covering the content. Open the menu, press Tab, press Escape, open it again. If focus is still where you left it and the body has not moved, the pattern holds.
For ready-made components, open the Navigation category and check the mobile preview. For the details, the Mobile navigation patterns in React guide covers drawers, bottom nav and focus.
Frequently asked questions
Is a hamburger better than bottom navigation?
Bottom navigation suits the 4–5 main actions of an app; a hamburger or drawer suits a site with many links. Do not use both for the same destinations.
How do I lock scrolling behind the menu?
Set overflow: hidden on the body and, where supported, inert on the page. Save the scroll position and restore it on close.
Where must focus return on close?
To the button that opened the menu. If that button is gone, to the first interactive element in the navbar.
What is the minimum tap target?
44×44 CSS px is the practical threshold. The icon can be 16–24px; the clickable area cannot.
Should the navbar be sticky?
Only when the content is long and the navigation earns its place. A sticky navbar takes space and can cause CLS when its height changes on scroll.