Nav Menu Widget (Pro)

The Nav Menu widget lets you add customized menus to WordPress and design it 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 or Tablet
  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.

  1. Text Color: Choose the color of the menu item text
  2. Pointer Color: (only available for Hover and Active states) Choose the color of the pointer
  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

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.

Read the full release post about the Menu widget