How To Use The Vertical Menu Widget By Atomic Addons

The Vertical Menu widget by Atomic Addons shows menu items stacked one above the other, as in a sidebar or a category list. Items can have submenus that fly out to the side when a visitor points at them, or open below them like an accordion. You build the items in the widget, or with Atomic Addons Pro use a menu from Appearance → Menus. This guide covers adding the widget, building the menu and choosing how submenus open.

Enable the Vertical Menu Widget

Vertical Menu is a Free widget and works with the free Atomic Addons plugin. Settings marked with a Pro badge need Atomic Addons Pro. Switch the widget on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Vertical Menu. You can also open the Menu / Navigation category.

4. 4

   Turn the Vertical Menu widget on.

5. 5

   Click Save Settings.

Add the Vertical Menu Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Vertical Menu. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Vertical Menu

Open the widget and go to Content → Vertical Menu. The widget starts with a sample menu of About, Gallery (with a submenu, which has a submenu of its own) and Contacts. Click an item to edit it, or click Add Item for a new one. Each item has:

1. 1

   Menu Title: The item's text. It accepts dynamic tags.

2. 2

   Select Item Type: Item, the default, is a plain link. Child Start is a link whose submenu holds the items that follow it. Child End closes that submenu and has no other settings.

3. 3

   Link: Where the item leads, # by default.

4. 4

   Icon: An optional icon in front of the title.

To build a submenu, add a Child Start item, then the items that belong in it, then a Child End item. Submenus can be nested this way. In the list, Child Start items read “[ Child Start: title” and Child End items “Child End ]”, so you can check that each submenu is closed.

Dynamic Menu (Pro) uses a WordPress menu instead of the list: turn it on and pick the menu under Select Menu. Its sub items become submenus, and the page being viewed and its parents are marked active, with their submenus open. Create or edit the menu under Appearance → Menus; until one is picked, the editor shows a hint and visitors see nothing.

Additional Settings

Content → Additional Settings sets the size of the menu and how submenus open:

1. 1

   Submenu Type: (Pro) Outer, the default, opens submenus beside the menu when a visitor points at an item, on screens 960px and wider; on smaller screens they open below the item when it is clicked. Inner always opens submenus below the item, like an accordion, when it is clicked.

2. 2

   Sub Menu Columns: With Outer: lays the items of a fly-out submenu in 1 (the default) to 4 columns, on screens 960px and wider.

3. 3

   Menu Width: The width of the menu, 100px to 1200px, per screen size.

4. 4

   Sub Menu Width: With Outer: the minimum width of a fly-out submenu, 220px unless you set one.

5. 5

   Menu Alignment: Places the menu at the left, center or right of its column, per screen size.

6. 6

   Text Alignemnt: Aligns the items' text left, center or right, per screen size.

7. 7

   Remove Parent Link: (Pro) Makes items that have a submenu open it without leaving the page, instead of following their link.

8. 8

   Show Sticky: (Pro) Keeps the menu on screen while the visitor scrolls, on screens 1024px and wider.

9. 9

   Sticky Offset: With Show Sticky: the space between the top of the screen and the menu, 0 by default.

10. 10

    Sticky on Scroll Up: With Show Sticky: shows the menu only while the visitor scrolls up, sliding in from the top.

11. 11

    Scrolling Area: With Show Sticky: the class or ID of the section the menu should stay inside, such as #parent-section.

Items with a submenu show an arrow. Clicking an Outer item on a small screen, or any Inner item, opens its submenu and closes the others at the same level.

Style the Vertical Menu

Everything below is on the Style tab:

• Main Menu — the menu's background, border, radius and padding, and the top-level items in Normal, Hover and Active states: text color, icon color, background, border, the color of the submenu arrow (Parent Indicator Color), typography, radius, padding, Item Gap and Icon Spacing. Active is an item whose submenu is open, or with a Dynamic Menu the page being viewed.
• Sub Menu — the same settings for the submenus and their items.