--- title: "How to Create a Vertical Menu in Elementor?" url: https://theplusaddons.com/docs/create-a-vertical-menu-in-elementor/ date: 2023-10-27 modified: 2026-05-17 author: "Aditya Sharma" description: "Do you want to add a vertical menu to your Elementor website? If you have a small number of menu items, a vertical menu can add a distinctive layout to..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Vertical-Menu-in-Elementor_-1024x536.jpg word_count: 644 --- # How to Create a Vertical Menu in Elementor? ## Key Takeaways - The Plus Addons for Elementor includes a Navigation Menu widget that allows users to create a vertical menu on their Elementor website. - Vertical menus are best used for blog and magazine sites, portfolio websites, and dashboard-style membership sites. - The Plus Addons for Elementor Pro offers advanced navigation controls, including responsive mobile toggles and hover-triggered dropdowns. - Users can select between horizontal, vertical, or mega menu layouts from the Menu Direction setting in The Plus Addons for Elementor. Do you want to add a vertical menu to your Elementor website? If you have a small number of menu items, a vertical menu can add a distinctive layout to your site that works well for sidebars, service pages, and structured navigation panels. With the Navigation Menu widget from The Plus Addons for Elementor, you can create a vertical menu on your Elementor website. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](/docs/navigation-menu-widget-settings-overview/).* **Best Used For:** - Blog and magazine sites that display category navigation in a left or right sidebar for quick topic access- Portfolio and agency websites using a side-panel menu to separate navigation from page content- Dashboard-style or membership sites that need a persistent vertical navigation column **Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated to enjoy all its powers.** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ### Create a Vertical Menu This is a Pro feature. [Upgrade to The Plus Addons for Elementor Pro for full functionality](https://theplusaddons.com/pricing/?utm_source=tpae&utm_medium=docs&utm_campaign=text), plus 120+ other widgets. To do this, add the Navigation Menu widget to the header, sidebar, or a page template and follow the steps below. > *Note: To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.*  1. From the **Menu Type** dropdown, select the appropriate option. 2. Select **Vertical Menu** from the **Menu Direction** section. This sets the navigation to display items in a column rather than a horizontal row. Use this when placing the menu in a sidebar or a narrow left-panel layout. 3. Select or create the menu from the **Content** tab, depending on the option you chose in the **Menu Type** dropdown. ![](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-vertical-menu-new.png) Suggested reading, [5 Best Elementor Mega Menu Plugins.](https://theplusaddons.com/blog/best-elementor-mega-menu-plugins/) From the **Submenu Hover Event** dropdown, select how submenu items open on hover or click. From the **Submenu Effect** dropdown, choose a transition effect for the dropdown. To build a full-width mega menu with additional columns and content blocks, see [How to Create a Mega Menu in Elementor](https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/). Your menu is now aligned vertically on the page. ![navigation menu vertical menu demo](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-vertical-menu-demo.png) ### Upgrade for Full Navigation Menu Power (Pro Only) The Plus Addons for Elementor Pro includes advanced navigation controls that go beyond standard layouts. Build responsive mobile toggles, hover-triggered dropdowns, sidebar vertical menus, and multi-column mega menu designs, all within the Elementor editor. #### Horizontal & Vertical Menu Layouts Choose between horizontal, vertical, or mega menu layouts from the **Menu Direction** setting. Use this to build sidebar navigation for blog templates or multi-level side menus. This capability is not included in Elementor's free navigation widget. #### Hover or Click Dropdown Control Set submenus to open on hover or on click. Use hover-triggered dropdowns for desktop navigation and click-triggered dropdowns when building menus for touch devices or complex multi-level structures. #### Sticky Navigation Support Pin your navigation menu in place as users scroll through longer pages. This is useful for one-page sites or long-form landing pages where you want the menu to remain accessible at all times. #### Custom Mega Menu & Repeater-Based Menus Switch to **Custom Repeater Menu** to design mega menus with links, images, and custom content using the Elementor editor. Use the Repeater field to build fully custom navigation panels with your own layout and content structure. For a step-by-step walkthrough, see [How to Create a Hamburger Mobile Menu with Elementor Template](https://theplusaddons.com/docs/create-a-hamburger-mobile-menu-with-elementor-template/). #### Why Upgrade? Upgrading to [The Plus Addons for Elementor Pro](https://theplusaddons.com/pricing/?utm_source=tpae&utm_medium=docs&utm_campaign=text) gives you a full navigation toolkit with responsive mobile toggles, hover-friendly dropdowns, sidebar vertical menus, and multi-column mega navigation. All of this integrates directly in the Elementor editor, with no additional CSS required. With Pro, you are getting a complete navigation system that improves user experience, supports complex layout requirements, and works across any type of WordPress site. Also, read [how to create a side menu in Elementor](https://theplusaddons.com/docs//create-a-side-menu-in-elementor/). ## Frequently Asked Questions **Q: What should I do if my vertical menu isn't displaying correctly?** A: If your vertical menu isn't displaying as expected, ensure that you have selected 'Vertical Menu' from the Menu Direction section in the Navigation Menu widget settings. This setting is crucial for aligning your menu items in a column format, which is ideal for sidebars or narrow layouts. If issues persist, check that The Plus Addons for Elementor is properly installed and activated. **Q: Can I use a vertical menu for a blog or magazine site?** A: A vertical menu is particularly effective for blog and magazine sites as it allows for category navigation to be displayed in a sidebar. This setup enables quick access to topics, enhancing user experience. The Plus Addons for Elementor's Navigation Menu widget supports this layout, making it easy to implement. **Q: What are the best practices for setting up a vertical menu in Elementor?** A: When setting up a vertical menu, select a small number of menu items to avoid clutter. Use the Submenu Hover Event dropdown to choose how submenu items openu2014hover is great for desktop users, while click is better for touch devices. This ensures that your navigation remains user-friendly across different platforms. **Q: How do I create a mega menu using The Plus Addons for Elementor?** A: To create a mega menu, you can refer to the guide on [How to Create a Mega Menu in Elementor](https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/). This guide outlines how to use the Custom Repeater Menu feature available in The Plus Addons for Elementor Pro, enabling you to design menus with links, images, and custom content effectively.