Nav Menu Widget

Nav Menu widget lets you use the menus you've already created on your WordPress website. You can customize your menus and choose various menu layouts and styles to match your website's design.

Create a WordPress menu

1. Log into your WordPress dashboard.
2. Navigate to Appearance > Menus.
3. Enter a name for your new menu in the Menu Name field.
4. Click the Create Menu button to create it.
5. On the side panel, select pages, posts, custom links, or categories.
6. Check the boxes next to the items you want to add and click Add to Menu.
7. Use the View All tab or search function for easier navigation if needed.
8. Click the arrow next to each item in the Menu Structure to add details:
   
   Navigation Label: Title displayed in the menu.
   Trigger a Popup: Choose a popup to trigger when this item is clicked.
9. Drag and drop items to reorder.
10. To create a submenus, drag items beneath a parent item and slightly to the right.
11. Save the Menu.

Content tab

• Menu: Select a menu you’ve previously set up in WordPress Dashboard > Appearance > Menus.
• Layout: Choose a layout: Horizontal, Vertical, or Dropdown.
• Align: Set the menu item alignment to the Left, Center, Right, or Justified.
• Pointer: Select a pointer style as None, Underline, Overline, Double Line, Framed, Background, or Text.
• Animation: Choose a pointer animation from Fade, Slide, Grow, Drop In, Drop Out, or None.
• Submenu Indicator: Choose the icon that indicates submenu items: None, Classic, Chevron, Angle, or Plus.

Mobile dropdown

• Toggle Button: Decide whether to show the Hamburger icon as the toggle button.
• Full Width: Choose whether the mobile dropdown spans the full width of the device.
• Breakpoint: Select when the mobile dropdown menu activates: Mobile, Tablet or None.
• Toggle Align: Position the toggle button to the Left, Center, or Right of the screen.
• Text Align: Set the alignment for mobile menu items: Aside (left) or Center.

Style tab

Main menu

• Typography: Customize the typography settings for the menu item text, including options for normal, hover, and active states.
• Text Color: Select the color for the menu item text.
• Item Background Color: Choose the background color for the menu items. Background color sequence and color order in the list will affect the menu items in the loop eg. If you have 3 colors and 5 items, item #4 will be color #1, etc.
• Pointer Width: Adjust the width of the pointer, which indicates the active menu item.
• Horizontal Padding: Specify the horizontal padding for the menu items.
• Vertical Padding: Define the vertical padding for the menu items.
• Space Between: Determine the spacing between menu items.

Dropdown

• Text Color: Choose the color of the menu item text for Normal, Hover, and Active states.
• Background Color: Choose the background color of the menu items for Normal, Hover, and Active states.
• Typography: Set the typography options for the menu items.
• Border Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or Groove.
• Border Radius: Set the border radius to control corner roundness.
• Box Shadow: Click the 🖋️ icon to add a shadow to the dropdown items.
• Padding: Set the padding around the text of the menu items.

Divider

• Border Type: Select a border type for the divider, choosing either None, Solid, Double, Dotted, Dashed, or Groove.
• Distance: Set the amount of space between the toggle and the dropdown menu.

Toggle button

• Color: Select the color of the toggle button icon independently for both normal and hover states.
• Background Color: Pick the background color of the toggle button for both normal and hover states.
• Size: Adjust the size of the toggle button for both normal and hover states.
• Border Width: Specify the width of the border around the toggle button for both normal and hover states.
• Border Radius: Define the border radius of the toggle button for both normal and hover states.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.