The Sub Menu widget by Atomic Addons shows menu links in a grid, each with an optional icon, a sub title under its name and a badge such as “New”. It is made for the dropdown panels of the Mega Menu Builder, but works on any page, for example as a list of services. You build the links in the widget, or take them from a WordPress menu. This guide covers adding the widget, building the links and laying out the grid.
Enable the Sub Menu Widget
Sub Menu is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Sub Menu. You can also open the Menu / Navigation category.
- 4
Turn the Sub Menu widget on.
- 5
Click Save Settings.
Add the Sub Menu Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Sub Menu. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
To use it in a mega menu, open a menu item's dropdown with Edit Dropdown Content (see the Mega Menu Builder guide) and drag the widget into the panel. A panel with three columns can hold a Sub Menu in each, shown on your site by the Mega Menu widget.
Sub Menu
Open the widget and go to Content → Sub Menu. The Menu Items list starts with ten sample links. Click an item to edit it, or click Add Item for a new one. Each item has two tabs; Layout holds its content:
- 1
Menu Title: The link's text. It accepts dynamic tags.
- 2
Menu Sub Title: A short line under the title, such as “Trending Design inspire to you” in the samples.
- 3
Menu Badge: A small label beside the title, such as “New” or “Hot”.
- 4
Link: Where the item leads,
#by default. An item whose link is the page being viewed is marked active. - 5
Icon: An optional icon in front of the title.
- 6
Icon Shape: With an icon: adds a decorative shape behind it. Off by default.
The item's Style tab colors just that item: Icon Color and Icon Background, Badge Color and Badge Background, and under HOVER the same colors on hover plus the Arrow Color. With Icon Shape on, Icon Shape Style opens the shape's settings: its background (solid or gradient), Shape Size, Border Radius, a Drop Shadow (color, horizontal, vertical and blur) and an Offset to move it.
Dynamic Menu uses a WordPress menu instead of the list: turn it on and pick the menu under Select Menu. The widget shows the menu's top-level items, each with its title and an arrow; sub items, icons, sub titles and badges aren't shown, and the page being viewed is marked active. Create or edit the menu under Appearance → Menus; until one is picked, the editor shows a hint and visitors see nothing.
Additional Options
Content → Additional Options lays out the grid:
- 1
Style: Default puts the icon left of the text. Reverse mirrors it: icon on the right, text aligned right. Box gives each item a bordered box with the icon above the text. Shadow gives each item a filled box that lifts with a shadow on hover.
- 2
Columns: 1 to 6 columns: 2 by default, 1 on phones. Use the device icon to set other numbers.
- 3
Columns Gap / Rows Gap: The space between columns and between rows, per screen size.
- 4
Show Heading: A heading above the grid. On by default.
- 5
Heading Text: The heading's text, “Advanced Sub Menu” by default.
- 6
Alignment: Aligns the heading left (the default), center or right, per screen size.
- 7
Show Sub title: Shows the items' sub titles. On by default; not available with Dynamic Menu.
- 8
Show Arrows: An arrow at the end of each item that slides in on hover. On by default; a Dynamic Menu always shows it.
- 9
Icons Hide on: Hides the items' icons on Desktop, Tablet or Mobile — pick one or more.
- 10
Sub Title Hide on: Hides the sub titles on the screen sizes you pick.
Style the Sub Menu
Everything below is on the Style tab. Sections for parts you turned off, or that a Dynamic Menu doesn't show, are hidden.
- Heading — color, background, padding, margin, border, radius and typography, with a Hover state.
- Items — each item's background, padding, border, radius and shadow, with a Hover state.
- Title — color, background, padding, margin, border, radius and typography, with a Hover/Active state.
- Sub Title — color, hover color, margin and typography.
- Icons — color, background, position, size, spacing, padding, border and radius, with a Hover state; a Glassmorphism blur behind the icon; and the shape settings for all items at once.
- Badge — color, background, border, radius, padding, Horizontal Offset and typography, with a Hover state.
- Arrows — with Show Arrows on: the arrows' color and Arrows Size.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.