Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Ecommerce Mega Menu — Link Columns — Free Website Section Template
Navbar · v1.0.0 · Updated 2026-11-14 · Responsive · GSAP animation · HTML, React & Vue
Extend with AI
Take This Section Further With AI
Ask an AI assistant to adapt the mega menu: add a live product search with suggestions, show the cart contents in a drawer, or highlight the current category.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a responsive ecommerce header with a mega menu in plain HTML, CSS and JavaScript.
- A thin dark top bar with a message on the left and small links on the right.
- A main row with the logo, a centred pill search form (GET, field name q) and account, wishlist and cart icon links with a small count badge on the cart.
- A category bar below with five items. Two have a full-width dropdown panel with three link columns (small uppercase titles) and a featured image card with a tag, title and button. The others are plain links.
- Hover opens a panel after about 90 ms and closes it 170 ms after the pointer leaves; a click pins it; only one panel is open at a time.
- Each trigger is a button with aria-expanded and aria-controls. Arrow Down opens the panel and focuses its first link, Esc closes it and returns focus, tabbing out closes it, and a click elsewhere closes it.
- On screens under 860 px show a burger button, move the search to its own row and turn the categories into tap-to-open accordions inside a dropdown menu.
- A sticky header with a soft shadow after scrolling. Without JavaScript the panels open on :hover and :focus-within.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
About this section
Ecommerce Mega Menu — Free Store Header With Link Columns
Ecommerce Mega Menu — Link Columns is a free, responsive store header with a full-width dropdown for every shop category. A thin top bar carries a delivery message and small links, the main row holds the logo, a search field and account, wishlist and cart icons with a count badge, and the category bar below opens panels of up to three link columns and a featured card with a photo, a tag, a title and a button.
A menu that opens the way shoppers expect
Hover a category and its panel opens after a short delay, so a pointer crossing the bar does not make the menu flicker. Click it and the panel stays open until you click again, press Esc or move to another category. Only one panel is open at a time, and a panel that is not needed simply is not there: leave the first column empty and the item becomes a plain link such as Sale or New in.
Keyboard and screen-reader friendly
Each category is a real button with aria-expanded and aria-controls. Arrow Down opens a panel and moves focus to its first link, Esc closes it and returns focus to the button, and tabbing out of the panel closes it. Without JavaScript the panels still open on hover and focus, so the links are never locked away.
Made for phones
On narrow screens the header collapses into a burger button, the search field drops to its own row, and every category becomes a tap-to-open accordion inside the menu. Link columns stack so nothing needs sideways scrolling.
Edit it in the browser
Change the logo, top bar, search placeholder, icon links and cart count, add up to six menu items, write each panel's columns as "Label | URL" lines, and upload a photo for the featured card. Colours, fonts and corner radius come from the shared theme, so the header matches every other section. The menu is also written as SiteNavigationElement data for search engines.
Export it
Copy one HTML file with the CSS included, download a ZIP with your images, copy a React or Vue component, or fork it into My Code. Pair it with the Product Grid for the shop front and the Multi-Column Footer at the bottom of the page.
Why use it
Why Use the Ecommerce Mega Menu — Link Columns
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the logo, top bar, search & icons and menu items in the panel. Switch the top bar on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
In real websites
Website Templates That Use the Ecommerce Mega Menu — Link Columns Section
The Ecommerce Mega Menu — Link Columns section is part of 3 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Online Store Website (Full Shop), Cafe & Coffee Shop Website (Order Online), Fashion Boutique Website (Online Store). Open any of them in the builder to edit the whole page, or keep customising this section by itself.
Got questions?
Frequently Asked Questions
A mega menu is a large dropdown that shows many links at once, grouped into columns, often with an image. Online stores use it so shoppers can see every sub-category without opening several small menus.
Leave the first link column of that item empty. The item then renders as an ordinary link to its own URL, with no dropdown arrow, which suits pages such as Sale or New in.
Yes. Below a certain width the header shows a burger button, and each category opens as an accordion inside the menu. The search field moves to its own full-width row.
Each category is a button with aria-expanded and aria-controls. Arrow Down opens a panel, Esc closes it and returns focus, and tabbing out closes it. Without JavaScript the panels open on hover and focus.
It is a normal GET form. Set the search page address in the editor and the form sends visitors to that page with their words in the q parameter, which most store platforms understand.
It saves an editable copy of your Ecommerce Mega Menu — Link Columns in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.