In this guide, we will show you how to add a “List Menu widget” to your Elementor website. The List Menu widget displays your WordPress menu in a clean, organized list format, helping you structure navigation in a simple and user-friendly way. Perfect for improving website navigation and enhancing usability, this widget ensures a seamless browsing experience for your visitors. Its clear list layout makes it easy for users to find important pages quickly while keeping your design neat and structured.
Let’s explore the customization options available in the “List Menu widget” for Elementor below.
Add a Free List Menu to Elementor
Add a Free List Menu Widget to an Elementor Page
Elementor List Menu Widget General Settings
Select Menu
Chooses which pre-built navigation list to display.
Max Depth
Sets how many levels of sub-menus are shown.
Menu Title
Defines the heading text; supports AI generation and dynamic data pulling.
Show Menu Title
A toggle to hide or display the heading on the front end.
Alignment
Controls horizontal positioning of the menu items.
Show Icon
Toggle to enable or disable the icon display.
Icon
Input field for a Font Awesome Unicode string; includes options for AI assistance and dynamic data sourcing.
Icon Padding
Sets the specific pixel spacing for the Top, Right, Bottom, and Left sides of the icon.
Padding Link
Synchronizes all four padding sides so they change together, or allows for individual side adjustments when unlinked.
Elementor List Menu Widget Style Settings
Menu Title Color
Sets the text color for the heading. You can choose a custom color or select from global site colors using the globe icon.
Menu Title Typography
Controls font style, size, weight, and spacing. The pencil icon opens detailed text settings, while the globe icon applies global font presets.
Menu Title Spacing
Adjusts the amount of space between the title and the menu items below it using a slider or numerical input.
Item Typography
Defines the font style, size, and weight for menu items.
Item Padding
Sets the internal spacing within each menu item (Top, Right, Bottom, Left).
Item Margin
Adjusts the external spacing around each menu item to separate them from other elements.
Item Color
Sets the default text color for menu links.
Item Color Hover
Determines the text color when a user rolls their mouse over a menu item.
Current Page Item Color
Sets a specific text color for the link of the page the user is currently visiting.
Item Border Type
Choose the style of the border (e.g., Solid, Dashed) surrounding the menu items.
Item Border Width
Controls the thickness of the border on each side.
Item Border Color
Sets the color of the border lines.
Item Background Hover
Changes the background color when a user hovers over the item.
Current Page Item BG Color
Sets the background color for the menu item corresponding to the active page.
Sub Item Typography
Manages font styles, weight, and size for dropdown or nested menu items.
Sub Item Padding
Sets internal spacing within each sub-item; often used to indent nested links.
Sub Item Margin
Controls the external spacing between sub-items.
Sub Item Link Color
Defines the default text color for sub-menu links.
Sub Item Color Hover
Sets the text color when a user hovers over a sub-item.
Current Page Sub Item Color
Specifies the text color for a sub-item if it represents the active page.
Sub Item Border Type
Selects the line style (e.g., Solid) for borders around sub-items.
Sub Item Border Width
Adjusts the thickness of the borders on each side.
Sub Item Border Color
Chooses the color for the sub-item borders.
Sub Item Background
Sets the background color for sub-items in their normal state.
Sub Item Background Hover
Changes the background color when a user hovers over a sub-item.
Current Page Sub Item BG Color
Sets a unique background color for the sub-item corresponding to the active page.
Sub Sub Item Typography
Controls the font appearance (style, size, weight) for tertiary-level menu items.
Sub Sub Item Padding
Adjusts internal spacing; the higher Left value is typically used for deep indentation of third-level links.
Sub Sub Item Margin
Sets the external spacing between individual third-level menu items.
Sub Sub Item Link Color
Defines the default text color for these specific nested links.
Sub Item Color Hover
Determines the text color change when a user hovers over a third-level item.
Sub Sub Item Border Type
Sets the stroke style (e.g., Solid) for borders around these items.
Sub Sub Item Border Width
Specifies the thickness of the borders on each side.
Sub Sub Item Border Color
Chooses the color for the borders of third-level items.
Sub Sub Item Background
Defines the background color for these items in their default state.
Sub Sub Item Background Hover
Controls the background color change during a hover interaction
Current Page Sub Sub Item BG Color
Highlights the background of the third-level item that corresponds to the active page.
Thank you for using the List Menu widget for Elementor! This simple and effective tool displays your WordPress menu in a clean, organized list format, making navigation easier and more intuitive for users. With its flexible styling options, smooth integration, and user-friendly layout, it helps improve website structure while ensuring a seamless browsing experience. For questions or inspiration, feel free to reach out or explore our demo.