The WordPress Menu Widget helps you to easily create navigation menus for your Elementor websites. It offers advanced styling options and mobile-friendly behavior, enabling you to create multi-level menus quickly. You can customize the widget using its wide range of customization options.
Let’s look at each of the options in the “WordPress Menu Widget” below.
Create a Menu #
To use this widget, first you have to create a menu.
Go to wordpress dashboard, got to Appearance>>Menus>>Give you menu a name.
You can also set the display location of menu.
Add item to your menu from the available options like pages, posts etc. You just have to click on checkbox next to any item and click add to menu.
After that select the items and drag them into the order you want. To make a submenu, drop it beneath the item you want to parent it and drag it to the right. Now save the changes and your menu is now ready to use in the widget.
Install WordPress Menu Widget for Elementor #
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “WordPress Menu”
- Hover over the widget in the search results and click install
- Add your “WordPress Menu” widget to any Elementor Page
General Settings #
Select Menu
Select the desired menu you want to display.
Max Depth
Select the depth of menu you want to show.
- All Depths
- 1
- 2
- 3
Align
Set the alignment to WordPress Menu.
- Inherit
- Start
- Center
- End
- Space Between
- Stretch
Show Expand Collapse Icon
Show/Hide the expand collapse icon.
Icon Spacing
Set the spacing between icons.
First Level Expand Icon
Choose icon for first level expand.
Expand Icon
Choose icon for expand button.
Collapse Icon
Choose icon for collapse button.
Responsive Settings #
Mobile Icon Open
Choose icon for open button for mobile screen.
Mobile Icon Close
Choose icon for close button for mobile screen.
Responsive Breakpoint
Set the responsive breakpoint for mobile screen.
Full Width On Mobile
Turn on to show menu on full width.
Responsive Menu Spacing
Set the spacing for menu in responsive layout.
WordPress Menu Widget Styling #
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Menu Styling #
Set the gap for menu items.
Menu Items Styling #
You can set the menu item background color, item color, border, padding, typography, icon size, and border radius.
Menu Sub Items Styling #
You can set the background, item color, border color, typography, and padding for menu sub items.
Menu Sub Sub Items Styling #
You can set the background, item color, border color, typography, and padding for menu sub sub items.
Menu Sub Sub Sub Items Styling #
You can set the background, item color, border color, typography, and padding for menu sub sub sub items.
Dropdown Styling #
You can set the dropdown width, and dropdown offset.
Responsive Menu Styling #
Here, You can set the burger menu open and close background, icon color, size, and positioning.
Usage Examples #
Here are some live use cases for the WordPress Menu widget.
