> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Nav Menu and Mega Menu

> The Nav Menu widget with hover effects and a mobile slide panel, and Mega Menu templates assigned under Appearance → Menus.

The **Nav Menu** widget prints a WordPress menu with dropdowns, one of seven hover effects and a mobile slide panel. Any menu item can open a **Mega Menu**: a full Elementor template designed in the Theme Builder and assigned to the item under **Appearance → Menus**.

## The Nav Menu widget

Found under *Site* in the widget panel.

### Menu

* **Menu**: the theme's default menu, or a specific one. The default is the Kit's own **Primary Menu** location, which it registers on every theme, falling back to the first location that has a menu assigned.
* **Alignment**: left, centre (default) or right, with a separate mobile value.
* **Hover effect**: None, Underline (default), Button, Magnet, Focus, Flip, Button + Flip. Each has its own style controls (underline height, button height, transition speed).
* **Dropdown icon**.

### Mobile menu and panel

* A **different menu** for mobile, if you want one.
* **Breakpoint**: any active Elementor breakpoint (default: tablet, under 1024 px), none, or a custom pixel width.
* **Toggle style**: five hamburger styles.
* **Panel design**: full screen or compact. The full-screen panel shows a logo: the site logo, the light logo, or a custom text or image.
* **Panel buttons**: a primary button (on by default, "Contact Us") and a secondary one, stacked or side by side, each with icon, alignment and full styling.

### Style

Menu items in normal, hover and active state; dropdowns; the hover effect; the mobile panel and its menu; the toggle button (width, height, line height and gap); the two panel buttons.

## Menu locations

The Kit registers two locations on every theme, **Primary Menu** and **Mobile Menu**, so a header built with the Nav Menu widget works the same on any theme. Assign a menu to Primary Menu under **Appearance → Menus → Manage Locations**. When [Bevel MCP](/mcp/overview) builds a header, it creates a menu and assigns it there.

## Mega menus

1. In **Bevel → Theme Builder**, create a template of type **Mega Menu**. It is designed on a blank canvas, at the width you choose under *Settings → Layout*: full width, the site's container width (default), auto, or a custom width (default 1200 px).
2. Under **Appearance → Menus**, open the **Mega Menu** box in the left column. It lists only mega-menu templates. Add one to the menu.
3. The item has its own **URL** field (default `#`). Set it if the parent item should also be a link.

The Nav Menu widget opens the template as the item's dropdown at the template's width. A mega menu has no display conditions; the menu is where it shows.