Submenu Element
The Submenu Element shows one of your WordPress menus inside the page content. You pick the menu, choose a horizontal or vertical direction and style the main items and their dropdowns separately, without touching the header of your site. Dropdowns, icons and image thumbnails from the menu are supported.
It is a good fit for secondary navigation: a sidebar menu on a service or product page, a row of links under a section heading, or a vertical menu with stacked, expandable submenus in a narrow column. Because it reads a regular WordPress menu, you edit the links in one place.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Submenu Element
Add the Submenu Element to a column and choose the menu in the Menu field. The list shows the menus created under Appearance > Menus. Set Direction to Horizontal for a row of links or Vertical for a list, then adjust Transition Time and Space Between Main Menu and Submenu if needed.
The Main tab styles the top-level items: typography, padding, spacing, border radius, the hover transition and regular and Hover / Active colors, borders and icon colors. Align Items and Justification are available for horizontal menus, Main Menu Item Text Align for vertical ones. The Submenu tab does the same for the dropdowns, including an optional box shadow and a separator color.
On the Submenu tab, Submenu Mode appears for vertical menus. Dropdown opens a classic flyout, where Expand Method chooses hover or click and Submenu Expand Direction chooses left or right. Stacked opens the submenu below its parent item; here you choose hover, click or always open, the Click Method Mode (toggle or accordion) and a Submenu Indent.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Menu | Select the menu which you want to use. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| Direction | Choose to have a horizontal or a vertical menu. |
| Margin | Spacing above and below the section. Enter values including any valid CSS unit, for example 4%. |
| Transition Time | Set the time for submenu expansion and all other hover transitions. In milliseconds. |
| Space Between Main Menu and Submenu | Controls the space between the main menu and dropdowns. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Main
| Heading | Description |
|---|---|
| Minimum Height | The minimum height for the main menu. Use any valid CSS unit. |
| Sticky Minimum Height | The minimum height for main menu links when the container is sticky. Use any valid CSS unit. |
| Align Items | Select how main menu items will be aligned. Defines the default behavior for how flex items are laid out along the cross axis on the current line (perpendicular to the main-axis). |
| Justification | Select how main menu items will be justified. |
| Main Menu Typography | Controls the typography of the main menu item. Leave empty for the global font family. |
| Main Menu Item Text Align | Select if main menu items should be aligned to the left, right or centered. |
| Main Menu Item Padding | Select the padding for main menu items. Enter values including any valid CSS unit, for example 10px or 10%. |
| Main Menu Item Spacing | The gap between main menu items. Use any valid CSS value, including its unit (10px, 4%, 1em etc). |
| Main Menu Item Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Main Menu Hover Transition | Select the animation type when hovering the main menu items. This animation is applied to the background-color and borders. |
| Main Menu Icon Position | Controls the main menu icon position. |
| Main Menu Icon Size | Controls the size of the main menu icons. |
| Main Menu Item Styling | Use filters to see specific type of content. |
| Main Menu Item Background Color | Controls the background-color for main menu items. |
| Main Menu Item Text Color | Controls the color for main menu item text color. |
| Main Menu Item Hover / Active Background Color | Controls the background-color for main menu items hover / active states. |
| Main Menu Item Hover / Active Text Color | Controls the color for main menu item text color hover / active states. |
| Main Menu Item Border Size | Select the border size for main menu items. Enter values including any valid CSS unit, for example 10px. |
| Main Menu Item Border Color | Controls the border-color for main menu items. |
| Main Menu Item Hover / Active Border Size | Controls the border size for main menu items hover / active states. Enter values including any valid CSS unit, for example 10px. |
| Main Menu Item Hover / Active Border Color | Controls the border-color for main menu items hover / active states. |
| Main Menu Item Icon Color | Controls the main menu icon color. |
| Main Menu Item Hover / Active Icon Color | Controls the main menu icon hover / active color. |
Submenu
| Heading | Description |
|---|---|
| Dropdown Carets | Select whether dropdown carets should show as submenu indicator. |
| Submenu Mode | Select whether you want a classic dropdown, or a stacked. |
| Expand Method | Select how submenus will expand. If carets are enabled, then they will become clickable. |
| Click Method Mode | Select how the submenus should open. Toggle allows several items to be open at a time. Accordion only allows one item to be open at a time. |
| Submenu Indent | Set submenu indent. Enter values including any valid CSS unit, for example 10px or 10%. |
| Submenu Expand Direction | Changes the expand direction for submenus and vertical menus. |
| Submenu Expand Transition | Changes the expand transition for submenus. |
| Submenu Maximum Width | The maximum width for submenus. Use any valid CSS value. |
| Submenu Typography | Controls the typography of the submenu items. Leave empty for the global font family. |
| Submenu Item Text Align | Select how the submenu text should be aligned. |
| Submenu Item Padding | Select the padding for submenu items. Enter values including any valid CSS unit, for example 10px or 10%. |
| Submenu Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Box Shadow | Set to “Yes” to enable box shadows. |
| Box Shadow Position | Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px. |
| Box Shadow Blur Radius | Set the blur radius of the box shadow. In pixels. |
| Box Shadow Spread Radius | Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. |
| Box Shadow Color | Controls the color of the box shadow. |
| Box Shadow Style | Set the style of the box shadow to either be an outer or inner shadow. |
| Submenu Thumbnail Size | Controls the width and height of the submenu image thumbnails. Use “auto” for automatic resizing if you added either width or height. |
| Submenu Separator Color | Controls the color for the submenu items separator. Set to transparent for no separator. |
| Submenu Item Styling | Use filters to see specific type of content. |
| Submenu Background Color | Controls the background-color for submenu dropdowns. |
| Submenu Text Color | Controls the text color for submenu dropdowns. |
| Submenu Hover / Active Background Color | Controls the background-color for submenu items hover / active states. |
| Submenu Hover / Active Text Color | Controls the text color for submenu items hover / active states. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Submenu Expand Transition only applies to horizontal menus with dropdowns. Vertical menus always fade their submenus in.
- Choose Click as the expand method when visitors use touch screens a lot; hover menus need a mouse to open.
- With Dropdown Carets turned on and the click method, the caret becomes the clickable control, so the parent item can still link to its own page.
- Sticky Minimum Height only shows when the parent container is set to sticky.
- For the main navigation of the site use the Menu Element in a header layout section; it adds a mobile menu, which this element does not have.