Nav Menu Widget

The Nav Menu widget lets you use menus that you’ve created in WordPress and design them in whatever way you want.

Check out this video demonstrating the various features of this widget.

Content

Layout

1. Menu: Select a menu you’ve previously set up via Appearance > Menus
2. Layout: Choose a Horizontal, Vertical, or Dropdown layout
3. Align: Set the menu item alignment, either Left, Center, Right, or Justified
4. Pointer: Select a pointer, either None, Underline, Double Line, Framed, Background, or Text
5. Animation: Choose the pointer animation, either Fade, Slide, Grow, Drop In, Drop Out, or None
6. Submenu Indicator: Choose the icon that indicates an item has submenu items, either None, Classic, Chevron, Angle, or Plus

Mobile Dropdown

1. Breakpoint: Select at which point the mobile dropdown menu kicks in, either on Mobile, Tablet or None.
2. Full Width: Select whether the mobile dropdown spans full width of the device, either Yes or No
3. Align: Choose whether the mobile menu items are displayed on the left, or in the center, by selecting either Aside or Center
4. Toggle Button: Show the Hamburger icon as the toggle button or not
5. Icon: This may be set for the Normal, Hover, and Active states. You may use the default icons, or custom ones by clicking the appropriate icon. Choose from the icon library or upload your own SVG.
   
6. Toggle Align: Show the toggle button on the Left, Center, or Right of the screen

Style

Main Menu

Typography: Set the typography options for the menu item text.

The following items can be set independently for all three states: Normal, Hover, and Active. 

1. Text Color: Choose the color of the menu item text
2. Pointer Color: Choose the color of the pointer’s hover or active states. The normal state uses the color set as the Accent Color in the Default Colors settings.

Note that if a Hover color is set but no Active color is set, the Active color will use the Hover color by default.

Divider

1. Divider: Toggle the option to enable or disable the divider between menu items
2. Style: From the dropdown menu choose select between solid, double, dotted, dashed, or grooved
3. Width: Use the slider or enter the value in the field in PX
4. Height: Use the slider or enter the value in the field in PX or %
5. Color: From the color picker, choose the color for your divider.

Padding and Spacing

1. Pointer Width: Set the width of the pointer
2. Horizontal Padding: Use the slider or enter the value in the field in PX to set the horizontal padding around the text of the menu items
3. Vertical Padding: Use the slider or enter the value in the field in PX to set the vertical padding around the text of the menu items
4. Space Between: Use the slider or enter the value in the field in PX to set the space between each menu items

Dropdown

On the desktop view, this will affect the submenu. On mobile view this will affect the entire menu.

The following items can be set independently for all three states: Normal, Hover, and Active.

1. Text Color: Choose the color of the menu item text
2. Background Color: Choose the background color of the menu items
3. Typography: Set the typography options for the menu items
4. Border Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or Groove
5. Width: Set the width of the border
6. Color: Choose the color of the border
7. Border Radius: Set the border radius to control corner roundness
8. Box Shadow: Create a box shadow around the dropdown menu
9. Horizontal Padding: Set the horizontal padding around the text of the menu items
10. Vertical Padding: Set the vertical padding around the text of the menu items

Divider

1. Border Type: Select a border type for the divider, choosing either None, Solid, Double, Dotted, Dashed, or Groove
2. Color: If divider border is chosen, choose the color of the divider border
3. Border Width: If divider border is chosen, set the width of the divider border
4. Distance: Set the amount of space between the toggle and the dropdown menu

Tip: Go to Elementor > Settings > Advanced and make sure Load Font Awesome 4 Support is set to Yes so that your submenu indicators will display properly.

Toggle Button

The following items can be set independently for both the normal and hover states.

1. Color: Choose the color of the toggle button icon
2. Background Color: Choose the background color of the toggle button
3. Size: Set the size of the toggle button
4. Border Width: Set the width of the border around the toggle button
5. Border Radius: Set the border radius of the toggle button

Note: The toggle button refers to the hamburger menu icon.

Accessibility Attributes

The Nav Menu Widget has the following accessibility attributes:

• tabindex
• aria-expanded
• aria-hidden
• role=”navigation”

Advanced

Set the Advanced options that are applicable to this widget

• Read the full release post about the Menu widget
• Read How to Create and Design a Custom Navigation Menu