Nav Menu widget allows you to display links to pages and preferably design them. Also, this widget makes it easy to create a menu and place it in the website’s header and footer built with Elementor.

Nav Menu Widget Sample

Content

• General Settings:
  • Select Menu: you can select one of the available menus (main, secondary, footer).
• Desktop Settings:
  • Layout: you can set the menu layout to vertical or horizontal.
    • Vertical: you can set the dropdown Placement (left side, right side, at the bottom).
  • Top Dropdown Icon: choose the dropdown icon for the first level of the menu.
  • Sub Dropdown Icon: choose the sub dropdown icon for the second level of the menu.
  • Menu Alignment: align the menu [left – right – center – justified].
• Mobile Settings:
  • Enable Mobile Trigger: turn the switch off if you need to disable the mobile trigger.
  • Layout: you can choose from different layouts for Mobile Menu (Default, Full width, Slide Left, Slide Right).
  • Alignment: align the menu [left – right – center – justified].
  • Icon: choose the trigger icon for the mobile menu.
  • Close Icon: choose the close icon for the mobile menu.

Style

• Top Level Items: you can customize the top-level items in three modes (Normal, Hover, Active)
  • Vertical Menu Width: you can set the vertical menu width (this shows in case you activated the vertical menu).
  • Vertical Menu Alignment: align the menu [left – right – center] (this shows in case you activated the vertical menu).
  • Background Color: set the background color for the full item.
  • Text Color: set the text color for the item.
  • Text Background Color: set the background color for the text block of the item.
  • Dropdown Icon Color: set the color for the dropdown icon.
  • Typography: turn the option on to view the typography settings.
  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Margin: specify the margin for the item
  • Border: here you can select the needed type of border to use for the item
  • Border Radius: here you can set the border-radius to make the angles more smooth and round.
  • Dropdown Icon Size: here you can set the dropdown icon size.
  • Gap Before Dropdown Icon: here you can set the space that you need between the text and the icon.
• Dropdown
  • Container Styles: these styles apply to the items container
    • Container width: set the dropdown container width.
    • Background Color: set the background color for the dropdown container.
    • Border Type: here you can select the needed type of border to use for the dropdown container.
    • Border Radius: here you can set the border-radius to make the angles more smooth and round.
    • Box Shadow: here you can apply the shadow for the dropdown container and change the shadow’s settings, such as color, blur, spread, and position.
    • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
    • Gap Before 1st Level Sub: here you can set the space you need between the item and the dropdown container.
    • Gap Before 2nd level Sub: here you can set the space you need between the dropdown container and the sub-dropdown.
  • Items Styles: these styles apply to the inner items.
    • Typography: turn the option on to view the typography settings.
    • Normal – Hover – Active: you can switch between the modes for the following options:
      • Background Color: set the background color for the item.
      • Text Color: set the text color for the item.
    • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
    • Dropdown Icon Size: here you can set the dropdown icon size.
    • Gap Before Dropdown Icon: here you can set the space that you need between the text and the icon.
  • Divider
    • Border Type: here you can select the needed type of border to use for the item.
• Mobile Trigger
  • Normal – Hover: you can switch between the modes for the following options:
    • Background Color: set the background color for the trigger button.
    • Text Color: set the text color for the trigger button.
  • Border Type: here you can select the needed type of border to use for the trigger button.
  • Border Radius: here you can set the border-radius to make the angles more smooth and round.
  • Width: here you can set the trigger button width.
  • Height: here you can set the trigger button height.
  • Icon size: here you can set the trigger button size.
• Mobile Menu
  • Background Color: set the background color for the Mobile Menu.
  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Box Shadow: here you can apply the shadow for the Mobile menu and change the shadow’s settings, such as color, blur, spread, and position.