The Dropdown Nav widget turns any WordPress navigation menu into a compact toggle-button dropdown — a common pattern for a “Shop by Category” menu, but it works with any menu you’ve built under Appearance → Menus.
Adding the Widget #
- Open the page in the Elementor editor.
- Search the widget panel for Dropdown Nav, under the BEW Elements category.
- Drag it into any section or column.
Before You Start: Create a Menu #
Dropdown Nav displays an existing WordPress navigation menu — it doesn’t build one for you. If you haven’t already, create a menu under Appearance → Menus first and add the links (categories, pages, or anything else) you want in the dropdown.
Note: If no menu is selected, or the selected menu has no items, the widget doesn’t render anything on the page — it won’t show a placeholder or error message.
Choosing the Menu #
Use the Select Menu dropdown in the widget’s Content tab to pick from any menu you’ve already created. The list is pulled directly from your site’s registered navigation menus.
Label and Icons #
- Label — switch on to show text next to the toggle button (defaults to “All Categories”); switch off to show the icon alone.
- Icon — shows or hides the hamburger-style icon on the button.
- Drop Icon — shows or hides the small arrow indicator after the label.
Hover or Click to Open #
By default, the dropdown opens when a visitor hovers over the button. Turn on Show on Click in the Content tab to switch to click-to-open instead — useful for touch devices or when hover feels accidental.
Styling #
The Style tab is split into three sections:
- Item — typography, text color, and background for the toggle button, with separate Normal and Hover states, plus border, border radius, margin, and padding.
- Icon Group — size and color (Normal/Hover) for both the hamburger and drop icons, plus icon margin.
- Dropdown — the flyout menu itself: width, item typography, an optional divider between items (with its own color), text and background color for Normal/Hover states, border, margin, and padding.
Note: If the ElementsKit Lite plugin is active, Dropdown Nav automatically renders using its menu walker, enabling multi-column mega-menu layouts for menus built with ElementsKit’s mega-menu options.
Frequently Asked Questions #
#
No. Dropdown Nav displays any WordPress navigation menu — it works without WooCommerce active, though it’s commonly used to show a menu of product categories.
#
Check that a menu is selected in the Select Menu control, and that the menu actually has at least one item. An unselected or empty menu renders nothing rather than a placeholder.
#
Yes — if the ElementsKit Lite plugin is active, the dropdown automatically renders using its mega-menu walker, so menus built with ElementsKit’s mega-menu options display correctly here too.
