Activate it and your theme's menus are already enhanced - nothing changes on the page until you set an option on an item. This guide walks through the item panel, mega menus, the special item types, the drawer and sticky header settings, the Customizer section, the shortcodes and block, and a few things worth knowing when a theme fights back.
Install it from Plugins → Add New by searching for Demfilz Advanced Menus (or upload demfilz-advanced-menus.zip under Plugins → Add New → Upload Plugin), then activate it. WooCommerce is optional: with it active you get the cart item, the product and product category columns and the account endpoints; without it those parts step aside quietly. On a block theme the plugin switches Appearance → Menus back on so you can build the menu there.
Open Appearance → Menus, expand any item and click Options in the Advanced Menus panel. The first tab covers the look of the item:
| Option | What it does |
|---|---|
| Choose icon / Use an image | Picks one of 105 inline SVG icons (searchable by name and keyword such as "trolley" or "delivery") or any image from the media library. |
| Icon position | Before the label, after it, above it, or icon only. Icon only keeps the label for screen readers. |
| Badge text and style | A short badge such as New, Sale or -20%, in Accent, Green, Amber, Red or Grey, or custom background and text colours. |
| Show the description under the label | Uses the item's Description field as a subtitle. If you cannot see that field, open Screen Options (top right) and tick Description. |
| Highlight | Turns the item into a solid or outline button, for the one call to action in the menu. |
Save the menu. The collapsed panel shows a one line summary ("Icon / Badge "Sale" / Mega menu") so you can see at a glance which items carry options.
The Visibility tab decides who sees the item:
| Rule | What it does |
|---|---|
| Show to | Everyone, logged in users, or logged out visitors. For logged in users you can tick roles; leave all unticked for any role. |
| Device | All devices, desktop only or mobile only. Device rules hide the item with CSS at the breakpoint set under Appearance → Advanced Menus. |
| Show from / Until | A date window in the site timezone, for a promotion that should appear and disappear on its own. |
Login and date rules remove the item on the server for every menu printed with the standard wp_nav_menu() function, and a hidden parent takes its children with it. The rules control what the menu shows; the linked pages stay reachable by URL, so protect private pages with a membership plugin as well.
A mega menu is three levels of ordinary menu items. Give a top level item child items (these become the columns) and give those their own children (the links inside each column). Then, on the top level item, open the Mega menu tab, tick Mega menu and save.
| Setting | Where | What it does |
|---|---|---|
| Columns | Top level item | Auto fits every column and its span; or force one to six columns. |
| Panel width | Top level item | Full width of the viewport, the width of the menu, or fit the content. |
| Column content | Column item | Links (the child items), custom content, products, product categories, recent posts, an image, or a synced pattern. |
| Column span | Column item | One to four tracks, for a products column that deserves more room. |
| Hide the column heading | Column item | Shows the body only, useful for an image column. |
Product columns choose the most recent, featured, on sale, best selling or one category's products and how many; category columns list product categories with thumbnail and count, top level or under a chosen parent. Product lists are cached for fifteen minutes and refreshed whenever a product is saved. Below the mobile breakpoint the panel becomes a plain nested list, so nothing is lost on a phone.
Add a Custom Link with # as the URL and a label, open its Type and content tab and choose an item type:
| Type | What it renders |
|---|---|
| Search form | An inline field or an icon that expands, searching everything, products only or posts and pages only, with live results as you type (Appearance → Advanced Menus → Search controls the limits). |
| Cart | A cart link with a live count and, optionally, the cart contents in a dropdown. Needs WooCommerce. |
| Account | A log in link for visitors; a menu of account pages, and log out, once signed in. |
| Custom content | The HTML and shortcodes entered in the Custom content box, for example an image with a link or another menu. |
| Divider | A thin separator between items. |
The No link option on the same tab turns any item into a heading that cannot be clicked, handy for column headings.
Open Appearance → Advanced Menus. The tabs, in the order you are likely to need them:
| Tab | What it controls |
|---|---|
| Theme menus | Which theme menus get the extras (every menu, only chosen locations, or none), the depth lift for mega menus, submenu arrows and toggle buttons. |
| Behaviour | The mobile breakpoint, hover or click to open, the hover delay and the animation. |
| Off-canvas | Enable the drawer, pick the menu, the side and the width, the floating button and its position, or enter the selector of your theme's own menu button (for example .menu-toggle) so taps on it open the drawer instead. Choose what the drawer contains: logo, search, account and cart links. |
| Sticky header | Enable it and enter the header's CSS selector, for example #masthead or header.site-header (right click the header and choose Inspect to find it). Set the top offset, the shrink class after 80px, and whether it also sticks on phones. Headers the theme already keeps on screen are skipped. |
| Search | Live results on or off, which post types are searched, the minimum characters and the maximum results. |
| Tools | The product column cache length, whether to keep item options on uninstall, and JSON export, import and reset. |
Open Appearance → Customize → Advanced Menus. The accent colour (badges, highlights, active items), the panel background, text, muted text and hover colours, the drawer colours, the corner radius, shadow, font size and the light, dark or automatic scheme all preview instantly in the site on the right. Publish when it looks right.
The theme's own header is the usual home for the menu, but you can place a menu anywhere:
| Placement | How |
|---|---|
| Block | Add the Advanced Menu block, pick a menu and a layout: horizontal bar, vertical list, or a drawer button. |
| Shortcode | [demfilz_menu id="12"] for a horizontal bar, [demfilz_menu menu="footer" layout="vertical"] for a list, [demfilz_menu_button label="Menu"] for a drawer button. Optional attributes: sticky="1", depth, class, label. |
| Widget | The Advanced Menu widget under Appearance → Widgets. |
| Any element | Add the attribute data-dadm-open to a button or link and it opens the drawer. |
My mega menu only shows two levels: some themes print their menu two levels deep. The plugin lifts that to three levels for menus that contain a mega item (Appearance → Advanced Menus → Theme menus → Mega menu depth). If the third level still does not appear, the theme uses a custom menu walker that skips the standard filters; render that menu with the block or shortcode instead, or use the drawer for mobile.
The icons or badges do not appear on the theme's menu: check Appearance → Advanced Menus → Theme menus. If you chose "only the locations ticked below", tick the header location. Visibility rules always apply, whichever mode is chosen.
Two menu buttons on phones: the theme's own button and the plugin's floating button. Enter the theme button's selector under Off-canvas → Reuse the theme's menu button and switch the floating button off.
The header jumps or doubles up when sticky: the theme probably keeps the header on screen already; the plugin skips elements that are sticky or fixed, so switch the plugin's sticky header off and let the theme do it.
A product column shows nothing: product columns need WooCommerce, published products that match the source (featured, on sale, the chosen category) and a saved cache. Editors see a note explaining which of these is missing; visitors see nothing until it is fixed.
Changes do not show after an update: a caching or minifying plugin may be serving the old script. The plugin asks the common optimisers to leave its script alone, but clear the cache once after updating.
We build and customise WordPress plugins for a living. If your menu needs a different layout, a data source we do not cover, or a design that matches a brand guide to the pixel, tell us what and we'll quote it.