Skip to main content
Elementor

Navigation menu widget (Pro)

the Navigation menu widget allows you to use menus you have created in WordPress and design them the way you want.
Watch this video that explains the various features of this widget.



Content

Design

  1. Menu: Select a menu that you have previously configured using Appearance > Menus
  2. Design: Choose a horizontal, vertical, or dropdown layout
  3. To line up: Sets the alignment of the menu item, 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, Drop, or None
  6. Submenu indicator: Choose the icon that indicates that an item has submenu items, either None, Classic, Chevron, Angle, or More

Mobile drop down menu

  1. Breakpoint: Select at which point the mobile drop-down menu is activated, whether it is Mobile, Tablet or None.
  2. Full width: Select whether the mobile drop-down menu spans the entire width of the device, either Yes or No
  3. To line up: Choose whether the mobile menu items are displayed on the left or in the center, by selecting Apart or Center
  4. Activation button: Show hamburger icon as toggle button or not
  5. Toggle align: Displays the toggle button on the left, center, or right of the screen

Style

Main menu

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

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

Note that if an offset color is set but no active color is set, the active color will use the default offset color.

  1. Text color: Choose the text color of the menu item
  2. Pointer color: Choose the color of the active or moving states of the pointer. The normal state uses the color set as the Accent Color in the Default Colors setting.
  3. Pointer width: Sets the width of the pointer
  4. Horizontal padding: Sets the horizontal padding around the text of menu items
  5. Vertical padding: Sets the vertical padding around the text of menu items
  6. Space between: Sets the space between each menu item

Drop down

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

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

  1. Text color: Choose the text color of the menu item
  2. Background color: Choose the background color of menu items
  3. Typography: Sets the font options for menu items
  4. Border type: Select a border type around the drop-down menu, choosing None, Solid, Double, Dotted, Dotted, or Groove
  5. Width: Sets the width of the border
  6. Colour: Choose the border color
  7. Edge radius: Sets the radius of the border to control the roundness of the corners
  8. Shadow of the box: Creates a box shadow around the drop-down menu
  9. Horizontal padding: Sets the horizontal padding around the text of menu items
  10. Vertical padding: Sets the vertical padding around the text of menu items

Divider

  1. Border type: Select an edge type for the divider, choosing None, Solid, Double, Dotted, Dotted, or Groove
  2. Colour: If dividing border is chosen, choose color of dividing border
  3. Border width: If dividing border is chosen, set the width of dividing border
  4. Distance: Sets the amount of space between the lever and the drop-down menu

Tip: go to Elementor> Settings> Advanced and make sure Load Font Awesome 4 support is established in yes so that the submenu indicators are displayed correctly.

Activation button

The following items can be set independently for normal and floating states.

  1. Colour: Choose the color of the toggle button icon
  2. Background color: Choose the background color of the toggle button
  3. Size: Sets the size of the toggle button
  4. Border width: Sets the width of the border around the toggle button
  5. Edge radius: Sets the border radius of the toggle button

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


Accessibility attributes

the Navigation menu widget has the following accessibility attributes:

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

Advanced

Set the advanced options that are applicable to this widget


R Marketing Digital