The Multi Level Sliding Menu widget for Elementor allows you to create sleek, multi-tiered menus with smooth sliding effects. This powerful widget enhances website navigation, making it easier for users to explore your content effortlessly. Whether you’re designing a complex site structure or a simple dropdown menu, it offers full customization to match your design needs.
Let’s look at each of the options in the Multi Level Sliding Menu widget for Elementor below.
Add a Multi Level Sliding Menu Widget to 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 “Multi Level Sliding Menu”
- Hover over the widget in the search results and click install
- Add the “Multi Level Sliding Menu” widget to any Elementor Page
General Settings
Select Menu
Choose which navigation menu to display. This dropdown lists all available menus created in the WordPress menu settings.
Max Depth
Set how many submenu levels should be displayed. "All Depths" means all submenu levels will be shown, while selecting a specific number limits how deep the menu structure goes.
Submenu Open Side
Define the direction in which the submenu appears relative to its parent item.
- Left
- Right
Submenu Open Speed
Set the time (in seconds) for the submenu to open when hovered over or clicked. Lower values make the menu appear faster, while higher values slow it down.
Clickable Parent Items
Enable or disable parent menu items as clickable links. If disabled, clicking a parent item will only expand its submenu instead of navigating to another page.
Layout Settings
Show Back Link Icon
Enable or disable the back link icon in the submenu. When enabled, a back button appears for navigation.
Back Link Icon
Select the icon displayed for the back link. This is typically used for returning to the previous menu level.
Back Link Text
Define the text displayed next to the back link icon.
Expand Icon
Choose the icon used to indicate expandable submenu items. This icon appears next to menu items that contain submenus.
Multi Level Sliding Menu Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Menu Styling
Set the menu background color, border radius, border, padding, and shadow.
Menu Items Styling
You can set the menu items padding, background color, typography, text color, margin, border, and radius.
Menu Sub Items Container Styling
You can set the background color, radius, border, padding and shadow of menu sub item container.
Menu Sub Items Styling
You can set the menu sub items typography, padding, background, and color.
Menu Sub Sub Items Container Styling
Set the background color, border radius, border, padding and shadow of menu sub sub items container.
Menu Sub Sub Items Styling
You can set the menu sub sub items typography, padding, background, and item color.
Menu Sub Sub Sub Items Container Styling
You can set the background color, border radius, border, padding and shadow of menu sub sub sub items container.
Menu Sub Sub Sub Items Styling
You can set the menu sub sub sub items typography, padding, background, and item color.
Menu Items Active Styling
You can set the menu items background color, text color, and typography in active state.
Back Link Styling
Set the typography, color, background, margin and padding of back link.
Icons Styling
You can set the icon positioning and icon gap.
Back Link Icon Styling
Set the back link icon size and icon color.
Expand Icon Styling
You can set the expand icon size, icon color and icon color hover.
Multi Level Sliding Menu Design Examples For Elementor
Here are some live use cases for the Multi Level Sliding Menu Widget.
Multi Level Sliding Menu on fitness products website.
Multi Level Sliding Menu on ice-cream website.
We hope this guide helped you explore the powerful features of the Multi-Level Sliding Menu widget. With its seamless sliding effects and multi-level navigation, you can enhance user experience and keep your website organized. If you have any questions or need further assistance, feel free to reach out. Happy designing!
