If you’re looking to create a more organized and user-friendly navigation system on your WordPress website, the Accordion Menu widget in Elementor is a powerful tool to consider. It allows you to build collapsible, interactive menus that neatly tuck away submenu items until needed—perfect for keeping your layout clean and intuitive. This widget integrates with your existing WordPress menus and offers full control over styling, animations, and icons, helping you create a seamless design that enhances the user experience.
Popular Use Cases for adding an Accordion Menu on an Elementor Website
E-Commerce Websites
Organize product categories into collapsible sections, making it easier for shoppers to browse items without cluttering the layout or overwhelming the navigation.
Mobile Navigation Menus
Use accordion menus on mobile to conserve space and create a cleaner, more user-friendly navigation experience with expandable submenus.
Documentation or Knowledge Base Sites
Use accordion menus to organize tutorials, guides, or support articles into neat sections, helping users quickly access the information they need.
Educational or Course Websites
Structure online courses or lessons in accordion sections to guide learners through topics in an organized, distraction-free layout.
Portfolio or Creative Websites
Group projects or work samples by category in accordion menus to present content neatly while encouraging visitors to explore more.
Service-Based Business Sites
Showcase multiple services in expandable panels, making it easier for potential clients to scan and find the service they’re interested in.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Accordion Menu widget to your Elementor website
To display a Menu, install the Accordion Menu widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Accordion Menu"
Hover over the widget and click install
Step #3: Add the Accordion Menu widget to your Elementor page
Now, in the Elementor editor, find the Accordion Menu widget and drag it to the desired part of your page.
General Settings
Select Menu
Select the menu you want to display.
Max Depth
Select the menu depth you want to display
- All Depths
- 1
- 2
- 3
Show Expand Collapse Icon (Pro)
Show/Hide the expand collapse icon.
Icon Position
Set the icon position.
- Start (Pro)
- End
Item Collapsed
Choose the item collapsed icon
- Right Arrow
- Left Arrow
- Down Arrow
- Up Arrow
- Plus
- Minus
- Custom Image
- Font Awesome Unicode
Item Expanded
Choose the item expanded icon
- Right Arrow (Pro)
- Left Arrow (Pro)
- Down Arrow (Pro)
- Up Arrow (Pro)
- Plus
- Minus
- Custom Image
- Font Awesome Unicode
Show Menu Title
Show/Hide the menu title text.
Menu Title
Type custom text for menu title.
Close Others on Open (Pro)
Choosing yes will close other expanded menus on expanding any menu.
Clickable Parent Items (Pro)
By choosing yes, it will make the parent menu item clickable.
Start Closed Always (Pro)
By enabling this, it will always start the menu items closed.
Wrapping it Up!
Adding an accordion menu to your Elementor website is a simple yet effective way to improve site navigation and usability. By grouping links into expandable sections, you reduce clutter and allow users to explore your content more efficiently. Plus, with Elementor’s flexible customization options, you can easily match the menu’s appearance to your site’s branding. Whether you’re building a large website or a compact one-page layout, an accordion menu can significantly boost engagement and overall site structure.
