Amber Mega Menu

Description

Build compact, searchable mega menus from product categories, taxonomies, or WordPress menus. Responsive and compatible with any theme.

What it does

Builds a mega menu from either a WordPress menu or a category taxonomy
(product_cat by default), with two layouts and full manual ordering.
Created by Amberweb — https://plugins.amberweb.lt

Page-builder edit modes show a compact, non-interactive menu preview. The full
overlay remains disabled inside the editor to prevent theme or builder styles
from distorting the editing canvas. The plugin uses standard WordPress
shortcodes and works with themes, widgets, templates, block editors, and page
builders that support shortcode output.

Layout 1 — “Compact groups”: a searchable grid of parent categories. Each
group initially shows six children; visitors can expand only the group they need.

Layout 2 — “Compact explorer”: a left rail of parent categories; hovering (or focusing)
a parent expands a panel on the right showing its sub-categories and
third-level items. Only one branch is shown at a time. On mobile the rail becomes
an accordion.

Both layouts include category search with highlighted matches and use a viewport-height panel with its
own scrolling, so a large catalogue never creates a page-height menu.
On phones, the menu uses a nearly full-screen, internally scrolling panel with
a two-row title/search toolbar and touch-sized, clearly indented hierarchy.
Sideways branches become a one-at-a-time accordion, while a search automatically
exposes matching branches. Opening the menu does not focus search or open the keyboard.

Free and Pro

This distribution is fully functional: unlimited mega menus, both layouts,
drag & drop ordering, custom labels, images, counts, hide-empty, search,
shortcodes and basic appearance controls are all included.

An optional premium distribution (Amber Mega Menu Pro), sold separately on
the author’s website, adds: Appearance → Menus integration, several menus as
tabs inside one panel, a centered modal opening mode, a WooCommerce cart
trigger with live counter, advanced trigger/typography/spacing controls and
per-menu frontend text customization. The premium code is not included in
this package and is not required for any feature listed above.

Configuration

Settings box (right column):
– Source: product/other categories, or a WordPress menu.
– Taxonomy / Menu selector.
– Layout: Columns or Sideways, saved independently for this mega menu configuration.
– Columns count (layout 1), levels to show (1–6 or unlimited).
– Trigger button text, background and text colors.
– Menu appearance controls: accent, panel and text colors. Every color has a
default reset, and all styling can be reset together.
– Open panels use a top-level overlay so sticky and floating site menus cannot cover them.
– Show product counts, show category images.
– Hide empty categories: categories with 0 products are left out of the front-end
menu; a parent stays visible if any of its sub-categories contain products.
(Applies to taxonomy sources, not WordPress menus.)
– “All categories” link URL + text shown in the panel footer.

Structure box (main column):
– Drag any item by its handle to reorder it.
– Drop an item inside another item’s indented area to make it a child
(works for parents, children and third-level items).
– “Custom label” overrides the category/menu title for this menu only.
– “Hide” removes the item (and its branch) from the front end.
– New categories added later in WooCommerce appear automatically at the end
of their natural parent; deleted ones disappear.

Save the post after changing the source so its items load into the structure box.

Usage

Shortcode:
[amber_mega_menu id=”123″]

Optional attributes (override this mega menu’s saved settings for this placement only):
layout=”columns|sideways” — omit this to use the layout saved for this mega menu
trigger=”All categories”
columns=”4″
depth=”3″
open=”1″ — renders the panel always open with no trigger button
(useful for a sidebar/catalog page)

PHP (theme template):

You can also paste the shortcode into any compatible block, widget, template,
or page builder.

Styling

All colors are CSS variables on the .smm wrapper, so you can override them in
your theme or site custom CSS:

.smm { –smm-blue:#0878a8; –smm-text:#17324d; –smm-bg:#fff; –smm-line:#dbe6ed; }