How to Make a Dropdown in Elementor in 9 Easy Steps
Table of Contents
- What is a dropdown menu?
- How to create a dropdown menu
- 1. Create a menu
- 2. Add pages to menus
- 3. Add custom links to a menu
- 4. Add the menu widget
- 5. Set menu layout and alignment
- 6. Customize pointer and animation
- 7. Add submenu indicator
- 8. Set mobile menu options
- 9. Customize menu icons
- Want to learn more Elementor tips?
- One element down, a whole website to go
Looking to create a clean, user-friendly dropdown menu in Elementor but can’t figure out where to start? We’ve got you covered.
Elementor simplifies the process of building customizable dropdown menus without the need for any custom code. With the right combination of settings, colour adjustments, and layout styling options, you can design a functional dropdown menu that not only looks great but also enhances user experience across all devices.
In this guide, we’ll walk you through the entire process, starting from selecting the right menu widget to configuring features, behaviour, and appearance for your navigation menu.
Let’s get started!
What is a dropdown menu?
A dropdown menu is a user interface element that reveals a list of menu items or options when triggered, typically by a click or hover. This type of navigation menu is widely used on websites and apps to simplify interaction and reduce visual clutter.
Dropdown sub menus, nested links, or categorized menu displays are often hidden until needed, supporting sophisticated menus without overwhelming the page layout. This makes them ideal for handling complex menus in forms, settings, or multi-layered site navigation.
When designed with thoughtful colour, border radius, and styling options, dropdown menus offer a clean appearance and intuitive behaviour. They improve user convenience by organizing choices efficiently and creating a professional menu structure that enhances the overall user experience.
Sample usage
Maria manages the website for a busy healthcare clinic. The clinic’s website provides details on various services like general medicine, pediatrics, and mental health. To simplify patient navigation, Maria plans to add a clear “Our Services” menu. Each service has its own page with descriptions, booking instructions, and provider profiles, including their photos.
Other uses
- Designing a corporate website menu with sections like About Us, Services, Our Team, and Contact.
- Building a nonprofit organization’s navigation with links to Mission, Programs, Events, and Donate.
- Creating a fitness website menu highlighting Classes, Trainers, Memberships, and Schedules.
- Structuring a tech review site menu with categories like Smartphones, Laptops, Gadgets, and Reviews.
How to create a dropdown menu
To create a dropdown in Elementor using the WordPress Menu widget, you’ll need the Pro version of Elementor. This feature isn’t available in the free version. If you don’t already have Elementor Pro, consider upgrading to access this widget.
1. Create a menu
Log in to WordPress, go to Appearance > Menus, name your menu, and click “Create Menu” to save it.
First, log in to your WordPress Admin dashboard. Then, navigate to Appearance > Menus in the sidebar. On the Menus page, enter a name for your new menu in the provided field. Finally, click the “Create Menu” button to save your new menu.
Additional options
- To automatically include top-level pages, check the “Auto add pages” box.
- Select a display location for the menu (e.g., Primary, Footer, etc.).
- To create multiple menus, click “Create a new menu”.
2. Add pages to menus
In the Pages panel, check the pages you want, click “Add to Menu”, then click “Save Menu” to apply your changes.
In the Add menu items panel, open the Pages section and check the boxes next to the pages you want to include. Then, click “Add to Menu” to add them. Your selected pages will now appear in the menu structure on the right. To finish, click “Save Menu” to apply your changes.
Additional options
- To create submenus, drag and drop the item beneath the desired parent, making sure it’s slightly indented to indicate it’s a submenu item.
3. Add custom links to a menu
To add a custom link, go to Appearance > Menus, open Custom Links, enter the URL and label, click “Add to Menu”, then Save Menu.
To add external URLs, anchor links, or placeholder links, log in to your WordPress Admin dashboard and go to Appearance > Menus. In the Add menu items panel, expand the Custom Links section. Fill in the URL field with the destination link you want the menu item to open, and enter the label you want to appear in the menu in the Link Text field. Then, click “Add to Menu” to include the link. Finally, click “Save Menu” to apply your changes.
4. Add the menu widget
Drag the Menu widget onto the page, go to the Content tab, and choose a menu you made in Appearance > Menus.
To add a navigation menu using the WordPress Menu widget, start by dragging the Menu widget onto the canvas. For help with this step, see the guide on adding elements to a page. In the Content tab, scroll to the Layout section. In the Menu field, select a menu you’ve already created in your WordPress dashboard under Appearance > Menus.
5. Set menu layout and alignment
Choose a layout style;horizontal, vertical, or dropdown and set menu alignment to left, center, right, or justified.
In the Layout field, select how you want your menu to display; options include horizontal, vertical, or dropdown layouts. Then, use the Alignment field to set how the menu items align within the widget: choose from left, center, right, or justified.
6. Customize pointer and animation
Choose a hover style like underline or frame, and add animations like fade or slide to make your menu more interactive.
In the Pointer field, choose a hover style for your menu items; options include underline, double line, framed, and more. If you select a pointer style, you can also choose an animation effect for how the pointer appears, such as fade, slide, or grow.
7. Add submenu indicator
Choose an icon like a chevron or angle to show that a menu item has a dropdown submenu.
In the Submenu Indicator field, select an icon style, such as classic, chevron, or angle, to visually indicate that a menu item contains a submenu.
8. Set mobile menu options
Customize how your menu works on mobile, set dropdown width, text alignment, breakpoint, and if a hamburger icon toggle should appear.
In the Mobile Dropdown section, customize how the menu appears on mobile devices:
- Breakpoint: Choose when the mobile dropdown menu activates; Mobile, Tablet, or None.
- Full Width: Decide whether the dropdown should span the full device width by selecting Yes or No.
- Text Align: Set the alignment of mobile menu items by choosing either Aside (left) or Center.
- Toggle Button: Choose whether to display a Hamburger icon as the menu toggle.
9. Customize menu icons
Set icons for menu items in normal, hover, and active states, and align the toggle button left, center, or right on the screen.
In the Icon section, assign icons for the menu items in different states: normal, hover, and active. You can choose from built-in icons, upload your own, or use an SVG file. Then, in the Toggle Align section, set the alignment of the toggle (hamburger) button to appear on the left, center, or right side of the screen.
Want to learn more Elementor tips?
If you found dropdowns exciting, there’s even more you can do with Elementor. Explore these simple how-to guides next:
- How to create Elementor tabs in 7 quick steps
A handy way to organize content without overwhelming your page. - 2 easy ways to add Elementor breadcrumbs to your website
Helps you understand where you are on your website and easily go back. - The ultimate guide for creating an Elementor header and footer
Master layout basics and place your dropdowns exactly where you want them. - 13 best practices to optimize Elementor SEO
Make your dropdown menus work for both users and search engines.
Elementor container vs section: Here’s everything you need to know
Understand structure options to build smarter and more responsive dropdowns.
One element down, a whole website to go
And we’re done! A simple, step-by-step guide to creating a dropdown in Elementor in just 9 easy steps. Whether you’re adding a navigation menu or organizing content in a clean and compact way, dropdowns are a powerful design element that can improve your site’s usability and overall user experience.
Now that you know how to create a dropdown in Elementor, you’re one step closer to building a more user-friendly and engaging website. But if you’re looking to create a full website or want expert support to ensure it’s designed for performance and impact, we can help!
Our team specializes in building custom websites that are both beautiful and effective. Whether you’re starting from scratch or looking to improve your current site, reach out and let’s build something that’s both practical and visually impressive.. Contact us today!
Need some help?
From one-time website fixes to future discussions about your website or branding plans, we're here to help.
Book a meeting or give us a call
at 613-704-5336.
