You can create an awesome accordion menu for WordPress websites with the help of the “Accordion Menu Widget.” It integrates with the WordPress menu system so you can easily create an accordion menu using this widget. By using it, your website visitors will find it easier to navigate & they will have a better user experience. A few clicks and you have an easy-to-set-up Accordion Menu. Customize the accordion menu according to your needs. Select the depth of the WordPress menu you want to show on your website. Match the colors to your site’s theme and customize the layout for the best user experience with lots of styling options.
Let’s look at each of the options in the “Accordion Menu Widget” below.
Install Accordion Menu Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Accordion Menu”
- Hover over the widget in the search results and click install
- Add your “Accordion Menu” widget to any Elementor 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
Show/Hide the expand collapse icon.
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
- Left Arrow
- Down Arrow
- Up Arrow
- 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
Choosing yes will close other expanded menus on expanding any menu.
Clickable Parent Items
By choosing yes, it will make the parent menu item clickable.
Accordion 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.
General Styling #
Set the background color, image or video and alignment of the menu.
Menu Title Styling #
Set the typography, padding, background color, text color, border, and alignment of the menu title.
Menu Items Styling #
You can set the padding, background color, typography, text color, margin, and border of the menu items.
Menu Sub Items Styling #
Style the typography, padding, background, color, etc. of the menu sub-items.
Menu Sub Sub Items Styling #
Style the typography, padding, background, color, etc. of the menu sub-sub-items.
Menu Item Active Styling #
In this section, you can style the background color and text color of the active menu items.
Usage Examples #
Here are some live use cases for the Accordion Menu
