With this widget, you can create a beautiful custom toggle menu.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- Make sure you’ve downloaded the Toggle Menu widget.
How to Activate the Toggle Menu Widget?
Go to
- WDesignKit → Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
How to Use the Toggle Menu Widget in Elementor?
Add the Toggle Menu widget to the page.
Content
In the Direction dropdown, you can select the menu open direction. Here you’ll find two options –
- Top – To open the menu in the upward/top direction.
- Bottom – To open the menu in the downward/bottom direction.
You can edit the menu button title from the Text field.
Popup
From this tab, you can add the menu items in two parts.
You can select a pre-defined style, from the Select Style dropdown.
Now, from the Navigation section, you can add the top part of the menu.
You can add a title for this menu section in the Label field.
Then, from the Navigation section, you can add the menu items. By default, you’ll find one repeater item, open it.
In the Title field, you have to add the menu item name.
Then you can add the item URL in the Link field.
You can click on the + Add Item button to add more repeater items.
Then, from the Social section, you can add the bottom part of the menu.
You can set the layout of this part of the menu to horizontal or vertical from the Layout dropdown.
Then, from the Label field, you can add a title for this menu section.
After that, from the Social section, you can add the menu items. By default, you’ll find one repeater item, open it.
From the Type dropdown, you can select the menu item type. Here you’ll find two options –
- Text – To add a text-based menu item.
- Icon – To add an icon-based menu item.
Based on your selection, you have to add a menu text or icon.
Then you can add the item URL in the Link field.
You can click on the + Add Item button to add more repeater items to the social section.
By enabling the Extra Button toggle, you can add an extra button to the popup menu.
In the Label Text field, you can add a title for the button section.
You have to add the button text from the Button Text field.
Then you can add the button URL in the Link field.
Alignment
From the Alignment section, you can align the button.
You can customize the style further from the Style tab.
Now, when you click on the button, a popup menu will open.
