OneTaskBy Tim King · Updated
Mega Menu Generator
Accessible Multi-Column Dropdown in HTML and CSS
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 Mega Menu works
A mega menu is a navigation dropdown that opens a wide panel with several columns of grouped links instead of a short list. Enter your column headings and links, add an optional promo box, and copy the accessible HTML, CSS and JavaScript.
Mega menus suit sites with many sections, such as shops, software products and universities, where a short dropdown would need nested submenus. Showing every group at once lets visitors scan the whole section and pick a page in a single click.
How the mega menu stays accessible
The panel opens from a real <button> with aria-expanded, so screen readers announce whether it
is open and the keyboard works without extra code. Column headings are real headings and each
column is a list, so screen reader users can jump between groups. Escape closes the panel and
returns focus to the button, and tabbing out of the menu or clicking elsewhere closes it too.
Layout
The panel is positioned under the whole navigation bar and uses a CSS grid with auto-fit
columns, so it fits three, four or five columns on a wide screen and stacks them on a narrow one
with no media queries.
FAQ
Should a mega menu open on hover?
Click is safer. Hover menus open by accident as the pointer crosses the bar, and they do not work for touch or keyboard users at all. If you want hover, add it as an extra and keep the button, so the menu still works for everyone.
How many links should a mega menu have?
Keep each column to about four to eight links and the whole panel to three to five columns. Anything larger becomes hard to scan, and a site map page or search box usually serves those visitors better than a longer menu.
How do I add a second mega menu to the bar?
Copy the list item with the button and panel, change the button text, and give the panel a new
id that matches the button's aria-controls. The script already closes other open panels when one
opens.
What should the menu look like on phones?
A wide panel does not fit on a phone, so most sites swap the bar for a mobile menu button below about 800 pixels. The grid in this menu stacks the columns, which works as a fallback, but a dedicated mobile menu is usually easier to use.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Animated Dropdown
Build an accessible dropdown menu with a fade, slide or scale animation.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Search Box Builder
Styled search bars with icon, button and focus ring, ready to paste.
Card Builder
Design a card component and copy its HTML and CSS.