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 explaining the various features of this widget.
Content
Layout
Menu: Select a menu you』ve previously set up via Appearance > MenusLayout: Choose a Horizontal, Vertical, or Dropdown layoutAlign: Set the menu item alignment, either Left, Center, Right, or JustifiedPointer: Select a pointer, either None, Underline, Double Line, Framed, Background, or TextAnimation: Choose the pointer animation, either Fade, Slide, Grow, Drop In, Drop Out, or NoneSubmenu Indicator: Choose the icon that indicates an item has submenu items, either None, Classic, Chevron, Angle, or Plus
Mobile Dropdown
Breakpoint: Select at which point the mobile dropdown menu kicks in, either on Mobile, Tablet or None.Full Width: Select whether the mobile dropdown spans full width of the device, either Yes or NoAlign: Choose whether the mobile menu items are displayed on the left, or in the center, by selecting either Aside or CenterToggle Button: Show the Hamburger icon as the toggle button or notToggle 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.
Text Color: Choose the color of the menu item textPointer 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
Divider: Toggle the option to enable or disable the divider between menu itemsStyle: From the dropdown menu choose select between solid, double, dotted, dashed, or groovedWidth: Use the slider or enter the value in the field in PXHeight: Use the slider or enter the value in the field in PX or %Color: From the color picker, choose the color for your divider.
Padding and Spacing
Pointer Width: Set the width of the pointerHorizontal Padding: Use the slider or enter the value in the field in PX to set the horizontal padding around the text of the menu itemsVertical Padding: Use the slider or enter the value in the field in PX to set the vertical padding around the text of the menu itemsSpace Between: Use the slider or enter the value in the field in PX to set the space between each menu items
Dropdown
On desktop, this will affect the submenu. On mobile this will affect the entire menu.
The following items can be set independently for all three states: Normal, Hover, and Active.
Text Color: Choose the color of the menu item textBackground Color: Choose the background color of the menu itemsTypography: Set the typography options for the menu itemsBorder Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or GrooveWidth: Set the width of the borderColor: Choose the color of the borderBorder Radius: Set the border radius to control corner roundnessBox Shadow: Create a box shadow around the dropdown menuHorizontal Padding: Set the horizontal padding around the text of the menu itemsVertical Padding: Set the vertical padding around the text of the menu items
Divider
Border Type: Select a border type for the divider, choosing either None, Solid, Double, Dotted, Dashed, or GrooveColor: If divider border is chosen, choose the color of the divider borderBorder Width: If divider border is chosen, set the width of the divider borderDistance: 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.
Color: Choose the color of the toggle button iconBackground Color: Choose the background color of the toggle buttonSize: Set the size of the toggle buttonBorder Width: Set the width of the border around the toggle buttonBorder 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:
tabindexaria-expandedaria-hiddenrole=」navigation」
Advanced
Set the Advanced options that are applicable to this widget
Read the full release post about the Menu widgetRead How to Create and Design a Custom Navigation Menu