How to design a mega menu

A mega menu is the multi-column dropdown that opens when a customer hovers (or taps) a top-level navigation item. Done well, it lets you expose a 30-product-category structure under 5 main-menu items without overwhelming anyone. Done badly, it becomes a wall of text that nobody can parse, or — worse — a desktop-only feature that breaks on mobile.

When to use a mega menu (and when not to)

Not every plant shop needs one. The threshold:

• Use a mega menu when at least one of your top-level categories has 6 or more sub-categories you want customers to discover from the navigation — and when those sub-categories represent meaningful demand, not just every variant you stock.

• Stick with a simple dropdown when each category has 5 or fewer sub-items. A 4-item flyout is faster to scan than a 4-item mega menu — there's no benefit to making it look heavier than it is.

• Skip dropdowns entirely when you only have top-level categories. A flat menu is fine for a focused niche shop (e.g. only succulents).

Most plant shops with the basis-set category structure (Houseplants, Outdoor plants, Gifts, Value bundles, Sale) cross the 6-sub-categories threshold inside Houseplants and Outdoor — those two top-level items get the mega menu treatment, the rest stay simple.

Anatomy of a working mega menu

A desktop mega menu has a few standard zones:

• Columns of links — typically 3 or 4 columns, each with a heading and 4–8 links underneath. Maximum 4 columns. Beyond that you're forcing the customer to scan side-to-side, which is slower than top-to-bottom.

• Optional: featured slot on the right — a banner image with a single promotion (a campaign category, a new-arrivals teaser, a seasonal collection). One slot, one image, one CTA. More than that and it competes with the navigation links.

• Headings inside columns — these are clickable too. The "Houseplants" heading at the top of the Houseplants column should link to the Houseplants collection page itself. Customers who want the full collection shouldn't be forced to pick a sub-category.

A four-column example for a plant shop

Here's a working layout for the Houseplants top-level item, assuming a shop that carries roughly 14 plant sub-categories. Four columns, one featured slot:

Column 1: Shop by type

• All houseplants

• Easy-care plants

• Air-purifying plants

• Hanging plants

• Large statement plants

• Mini plants

Column 2: Shop by light

• Bright, direct sun

• Bright, indirect light

• Medium light

• Low light / north-facing rooms

Column 3: Shop by species

• Monstera

• Calathea

• Philodendron

• Ficus

• Palms

• View all species

Column 4: Shop by room or theme

• Pet-friendly

• Bathroom plants

• Office plants

• Bedroom plants

Featured slot (right): banner image — currently rotating to Spring arrivals, single CTA "Discover what's new".

That's 22 navigation entries under one top-level item, organised so a customer who knows what they want finds it in two seconds (Calathea), a customer who's exploring has three different doorways (by type, by light, by room), and a customer who's open to suggestion sees the seasonal banner.

The featured slot — yes or no

The right-hand image slot is optional. Use it if:

• You have a clear seasonal or campaign push that benefits from being seen during navigation, not just on the homepage.

• You can commit to keeping it fresh — a Christmas banner still sitting in your mega menu in February is a louder dead-shop signal than no banner at all.

Skip it if your shop is small enough that the navigation columns already feel sparse. An empty featured slot is worse than no slot.

Mobile is an accordion, not a mega menu

On mobile, the mega menu becomes a vertical accordion inside the hamburger drawer. The columns disappear; everything stacks. Rules:

• Top-level: 5–7 items, same as desktop. The hamburger doesn't change which categories matter.

• Maximum 1 level deep before scroll. Top-level → sub-category list → collection page. Don't try to mirror desktop's 4-column structure with nested accordions inside accordions; users get lost.

• Tap to expand, tap to navigate. The top-level item itself should be tappable as a link (going to the collection page) AND have a chevron to expand the sub-list. Use a separate chevron icon — don't make the whole row do double duty, customers can't tell what will happen.

• Keep heading labels short. "Shop by light" is fine on desktop; on mobile, "By light" is enough. Screen real estate matters.

The mobile accordion can — and should — sometimes be narrower than the desktop mega menu. A mobile user is not reading 22 sub-category links inside one collapsed top-level item. They're scanning. If you have 22 desktop entries, consider exposing only 8–10 of them on mobile and linking the rest from the collection page. The mega menu is desktop's chance to teach the catalog; mobile is for the customer who already knows where they're going.

Hover vs. click on desktop

Older mega menus open on hover. Newer ones open on click. The accessibility argument is settled: click wins.

• Hover menus are a barrier for keyboard users and assistive tech. Click menus expose the same content with proper ARIA roles.

• Hover menus accidentally trigger when a customer is reading something near the navigation — disruptive and easy to mis-click.

• Click menus give you a clean "open" state with a backdrop, and a clear close action.

Most modern Shopify and WooCommerce themes default to click. If yours is hover-only, switching to click is rarely a controversial change with customers — but it's a meaningful improvement for the 5–10% of your visitors using keyboard navigation, screen readers, or hover-impaired devices like touchscreens-on-desktop.

Content discipline inside the mega menu

A few rules that catch resellers:

• Don't repeat the parent in the children. If the column heading is "Shop by species", the link below should say "Monstera", not "Monstera plants". The parent already implies it.

• Group by customer logic, not catalog logic. "Shop by light" is a customer mental model. "Tropical foliage type B" is a supplier model. Read category structure for why that distinction matters.

• Cap at 4 columns, 8 links per column. 32 links per top-level item is the absolute ceiling. Beyond that the customer stops scanning and starts giving up.

• Don't use the mega menu as a content marketing surface. "Read our care guides" can live in the main menu (Inspiration item) but not as a column inside Houseplants — the customer is shopping, not reading.

What to do tomorrow

Audit your current top-level items: count the sub-categories you'd want to expose under each. Anywhere you cross 6, plan a mega menu. For each, sketch the 3–4 column groupings on paper before opening your theme settings — "by type", "by light", "by room", "by species" are the four most common groupings for plant shops; pick the ones that match your assortment. Then build it in Shopify (Online Store → Navigation, with a theme that supports mega menus or an app like Meteor / Buddha) or WooCommerce (most premium themes have native mega menu support, otherwise the Max Mega Menu plugin). After that, test the mobile accordion on an actual phone — not the desktop preview — and trim the mobile sub-list down to what fits in one screen of scroll. Then move on to setting up filters and product attributes, because the sub-categories you just exposed in the mega menu are also the spec values that drive your filters.