Mini Hamburger Menu Widget for Elementor

Table of Contents

With this widget, you can easily add two call-to-action buttons side by side on your website. You can customize each button with its own text, link, icon, and tooltip, giving users clear action choices. The Dual Buttons widget is easy to use and helps you create a clean, interactive, and engaging button layout.

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 Mini Hamburger Menu widget.

How to Activate the Mini Hamburger Menu Widget?

Go to 

  • WDesignKit WidgetsBrowse Widgets. 
  • Search the widget name and select Elementor as the Page Builder.
  • Click on the Download icon.

Use Cases

Use this widget when you want to add a compact, toggle-based navigation menu that keeps your layout clean while giving users quick access to important links and actions.

Best For:

  • Mobile & Responsive Websites: Ideal for small screens where a hamburger menu helps save space and improves navigation on mobile and tablet devices.
  • Minimal Website Layouts: Keep the page design uncluttered by hiding navigation and actions inside a compact menu.
  • Landing Pages: Add simple navigation or key call-to-action buttons without distracting users from the main content.
  • Portfolio Websites: Display menu links, social icons, and buttons in a clean and modern hamburger-style menu.
  • Business & Corporate Websites: Include navigation links, contact buttons, and social profiles in a structured and easy-to-access menu.
  • E-commerce Websites: Provide quick access to categories, account links, or promotional buttons using a compact menu.
  • Social Media Access: Show social media icons inside the menu to guide users to your social profiles.
  • Call-to-Action Driven Pages: Add buttons such as “Contact Us,” “Get a Quote,” or “Buy Now” inside the menu to drive user actions.
  • Modern UI Designs: Perfect for websites aiming for a sleek, modern, and user-friendly navigation experience.

How to Use the Mini Hamburger Menu Widget in Elementor?

Add the Mini Hamburger Menu widget to the page.

Layout

You can select a pre-defined menu style from the Style dropdown.

Note :From this tab, based on the style you selected, you will see different options to add the content.

You can choose a pre-defined animation style from the Style dropdown under the Icon heading.

Note: Based on the icon style you select, you will see different icons and related options.

Menubar

Under the Open Menu heading, in the Text field, you can add the text that appears on the button to open the menu.

Under the Close Menu heading, in the Text field, you can add the text that appears on the button to close the menu.

Note: Button text will work only when both the Open Menu and Close Menu texts are added.


Content

From the Menu Items section, you can add the menu items. By default, you’ll find five repeater items; open them.

In the Text field, you can add the menu item text.

From the URL field, you can add a link that opens when the menu item is clicked.

You can click on the + Add Item button to add more items.

Button

In the Text field, you can add the text that will appear on the button.

From the URL field, you can add a link that opens when the button is clicked.

From the Select Icon option, you can choose an icon or SVG Icon to display on the button.

Social Icons

By enabling the Social Icons toggle, you will see the Items section for your menu.

From the Items section, you can add the social icon items. By default, you’ll find three repeater items; open them.

From the Select Icon field, you can choose the social media icon you want to display.

From the URL field, you can add the link that opens when the social icon is clicked (for example, a social media profile link).

You can click on the + Add Item button to add more items.

Then, from the Style tab, you can further customize the style of the Mini Hamburger Menu.