Nav Menu Widget (Pro)

Nav Menu Widget (Pro)

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

  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. 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. 

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

  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.
  3. Pointer Width: Set the width of the pointer
  4. Horizontal Padding: Set the horizontal padding around the text of the menu items
  5. Vertical Padding: Set the vertical padding around the text of the menu items
  6. Space Between: Set the space between each menu item

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.

  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


Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email

Did this answer your question?

255 people find it useful

Yes

No

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before