OneTaskBy Tim King · Updated
Mobile Menu Generator
Accessible Hamburger Menu in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Mobile Menu works
A mobile menu hides the site navigation behind a hamburger button on small screens and shows the links in a row on wide ones. Set the site name, links, icon and breakpoint, then copy HTML, CSS and a short script.
One set of links serves every screen. Above the breakpoint the links sit in a row beside the site name and the hamburger button is hidden. Below it the button appears and the links move into a panel that drops down under the bar when the button is pressed.
How the mobile menu stays accessible
The hamburger is a real <button> with aria-label="Menu" and aria-expanded, so screen readers
announce it as a menu button and say whether it is open. The CSS reads the same aria-expanded
value to show the panel, so what people see and what is announced always match. Escape closes the
menu and returns focus to the button, and choosing a link closes it too, which matters on
single-page sites where the page does not reload.
The animated icon
The three bars are one element and its two pseudo-elements. When the menu opens the middle bar fades out and the outer two rotate into a cross, which tells people the same button closes the menu. Visitors with reduced motion turned on get the change without the animation.
FAQ
What breakpoint should a mobile menu use?
Pick the width where your links stop fitting on one line, not a device size. Around 768 pixels suits five or six short links. Longer labels or more items need a wider breakpoint, which you can set with the slider and check with the desktop preview.
Should the hamburger button say "Menu"?
Some usability studies found that a visible "Menu" label beside the icon is recognised by more people than the icon alone. The button always has an accessible name, and you can add the word inside the button next to the bars if your audience is less familiar with the icon.
Why does the preview not follow the breakpoint?
The preview box is narrower than most screens, so it would almost always show the phone layout. Instead the "Preview at" option forces the phone or desktop layout in the preview. The copied code uses a normal media query, so on a real site the switch happens at the breakpoint you set.
Should the page scroll while the menu is open?
For a short dropdown panel like this, yes; it only covers the top of the page. If your menu fills the whole screen, use an off-canvas menu with an overlay instead, which traps focus and closes when the overlay is clicked.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Off-Canvas Menu
Build an accessible slide-out side menu with an overlay and focus trap.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Animated Dropdown
Build an accessible dropdown menu with a fade, slide or scale animation.
Tabs Builder
Build accessible tabs with arrow key support and three styles.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.