# Nav Menu Widget

> Display a WordPress menu in Elementor-built headers and footers with the Phox Nav Menu widget: menu selection, layouts and style options.

Source: https://phox.wdes.org/docs/nav-menu-widget/
Last updated: 2021-08-20

![wdes widget menu](https://phox.wdes.org/docs/assets/wdes-widget-menu.CR5gNLKy_ZNa60k.webp)

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

![nav menu widget](https://phox.wdes.org/docs/assets/nav-menu-widget.SV8aOYR8_Z25V5iJ.webp)

#### Content

![phox content](https://phox.wdes.org/docs/assets/phox-content.CI4qH3Eh_1Q89YI.webp)

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

![site nav style](https://phox.wdes.org/docs/assets/site-nav-style.DF__8H4y_1eqfyI.webp)

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