Vertical Menu

How to use Vertical Menu Widget of Sky Addons for Elementor

Sky Addons Vertical Menu Widget is a powerful tool that allows you to create stylish and functional vertical menus for your Elementor website. Whether you’re building a complex navigation system or a simple sidebar menu, this widget provides the flexibility and customization options you need. It’s an essential addon for Elementor, enhancing your elementor website with advanced navigation capabilities. Perfect for creating elementor landing page designs or integrating seamlessly into your elementor themes, the Vertical Menu widget is a valuable addition to any elementor plugins collection.

Description:

The Vertical Menu widget is designed to be both user-friendly and feature-rich. It offers two primary menu types: Custom Menu and Dynamic Menu. The Custom Menu allows you to build your menu structure from scratch using a repeater interface, giving you complete control over each menu item, its link, and associated icon. The Dynamic Menu, on the other hand, pulls directly from your existing WordPress menus, making it easy to integrate your current navigation setup. With options for accordion or drop-down collapse styles, you can tailor the menu’s behavior to suit your site’s design and user experience. Style your menus with extensive typography, spacing, color, and background controls to match your brand. This widget is perfect for anyone looking to enhance their elementor website builder experience with a professional and customizable vertical menu. It’s a great addition to any elements pack, providing a premium addon for Elementor without the complexity. Whether you’re designing a landing page or a full elementor website, the Vertical Menu widget offers the flexibility and control you need.

Key Features List –

1. Custom Menu Creation: Build menus from scratch with a user-friendly repeater interface.
2. Dynamic Menu Integration: Use existing WordPress menus for quick setup.
3. Accordion and Drop-Down Styles: Choose the collapse style that best fits your design.
4. Extensive Styling Options: Customize typography, colors, spacing, and backgrounds.

Insert Vertical Menu Widget

1. Open Elementor Editor. In the Elementor panel, search for “Vertical Menu”.
2. Drag and Drop the Widget to the desired location on your page / editor.

Vertical Menu Section

• Menu Type: Choose between “Custom Menu” for manual creation and “Dynamic Menu” to use existing WordPress menus.
• Select Menu: (Dynamic Menu only) Choose the WordPress menu to display.
• Collapse Style: Select “Accordion” for collapsible sections or “Drop” for a traditional dropdown.
• Menu Items: (Custom Menu only) Use the repeater to add and configure menu items.
  • Menu Title: The text displayed for the menu item.
  • Link: The URL the menu item links to.
  • Icon: An icon to display next to the menu title.
  • Menu Level: Set the menu level (1 for main, 2 for submenu, 3 for sub-submenu).

Layout Section

Style Customization: Adjust the overall layout and alignment of the menu.

• Layout Width: Set the width of the menu.
• Menu Alignment: Align the menu to the left, center, or right.
• Text Alignment: Align the text within the menu items.

Menu Style Section

Style Customization: Customize the appearance of the main menu items.

• Text & Typography:
  • Typography: Control the font, size, weight, and other text properties.
• Spacing & Layout:
  • Item Padding: Adjust the padding around each menu item.
  • Item Gap: Set the spacing between menu items.
  • Icon Spacing: Adjust the spacing between the icon and the text.
• Container Styling:
  • Background: Set the background color or image for the menu container.
  • Border: Add a border around the menu container.
  • Border Radius: Round the corners of the menu container.
  • Container Padding: Adjust the padding inside the menu container.
• Item States (Colors & Effects):
  • Normal:
    • Text Color: Set the text color for normal state.
    • Icon Color: Set the icon color for normal state.
    • Background: Set the background color for normal state.
    • Parent Indicator Color: Color of the dropdown arrow.
    • Item Border & Styling: Set the border properties for normal state.
    • Item Border Radius: Set the border radius for normal state.
  • Hover:
    • Text Color: Set the text color for hover state.
    • Icon Color: Set the icon color for hover state.
    • Background: Set the background color for hover state.
    • Border Color: Set the border color for hover state.
    • Parent Indicator Color: Color of the dropdown arrow on hover.
  • Active:
    • Text Color: Set the text color for active state.
    • Icon Color: Set the icon color for active state.
    • Background: Set the background color for active state.
    • Border Color: Set the border color for active state.
    • Parent Indicator Color: Color of the dropdown arrow when active.

Sub Men Style Section

Style Customization: Customize the appearance of the submenu items.

• Text & Typography:
  • Typography: Control the font, size, weight, and other text properties for submenu items.
• Spacing & Layout:
  • Item Padding: Adjust the padding around each submenu item.
  • Item Gap: Set the spacing between submenu items.
  • Icon Spacing: Adjust the spacing between the icon and the text in submenu items.
• Container Styling:
  • Background: Set the background color or image for the submenu container.
  • Border: Add a border around the submenu container.
  • Border Radius: Round the corners of the submenu container.
  • Container Padding: Adjust the padding inside the submenu container.
• Item States (Colors & Effects):
  • Normal:
    • Text Color: Set the text color for normal state of submenu items.
    • Icon Color: Set the icon color for normal state of submenu items.
    • Background: Set the background color for normal state of submenu items.
    • Parent Indicator Color: Color of the dropdown arrow in submenus.
    • Item Border & Styling: Set the border properties for normal state of submenu items.
    • Item Border Radius: Set the border radius for normal state of submenu items.
  • Hover:
    • Text Color: Set the text color for hover state of submenu items.
    • Icon Color: Set the icon color for hover state of submenu items.
    • Background: Set the background color for hover state of submenu items.
    • Border Color: Set the border color for hover state of submenu items.
    • Parent Indicator Color: Color of the dropdown arrow on hover in submenus.
  • Active:
    • Color: Set the text color for active state of submenu items.
    • Background: Set the background color for active state of submenu items.
    • Border Color: Set the border color for active state of submenu items.
    • Icon Color: Set the icon color for active state of submenu items.
    • Parent Indicator Color: Color of the dropdown arrow when active in submenus.

Icon Style Section

Style Customization: Customize the appearance of the icons in the menu.

• Icon Size: Adjust the size of the icons.
• Icon Padding: Add padding around the icons.
• Icon Border: Add a border around the icons.
• Icon Border Radius: Round the corners of the icon borders.
• Normal:
  • Icon Color: Set the color of the icons.
  • Icon Background: Set the background color of the icons.
• Hover:
  • Icon Color: Set the color of the icons on hover.
  • Icon Border Color: Set the border color of the icons on hover.
  • Icon Background: Set the background color of the icons on hover.
• Active:
  • Icon Color: Set the color of the icons when active.
  • Icon Border Color: Set the border color of the icons when active.
  • Icon Background: Set the background color of the icons when active.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Menu Not Displaying: Ensure a menu is selected in the “Dynamic Menu” option or that menu items are added in the “Custom Menu” option.
2. Styling Issues: Clear your browser cache and Elementor’s CSS cache to ensure the latest styles are applied.

Conclusion

The Sky Addons Vertical Menu widget is a versatile tool for creating custom and dynamic vertical menus in Elementor. With its extensive customization options and user-friendly interface, you can easily create menus that perfectly match your website’s design and functionality. It’s an excellent addition to any elementor kit library, providing a robust solution for navigation.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.