---
title: Nav Menu
description: "## Overview The **Nav Menu widget in SiteCraft** allows you to display and customize WordPress menus inside Elementor layouts. It gives you full control over styling, alignment, and responsive behavior to create clean and user-friendly navigation sections. --- ## Key…"
url: "https://sitecraft.themeshala.com/docs/nav-menu/"
updated: "2026-04-19"
category: "Header & Footer Widgets"
---

# Nav Menu

## Overview

The **Nav Menu widget in SiteCraft** allows you to display and customize WordPress menus inside Elementor layouts. It gives you full control over styling, alignment, and responsive behavior to create clean and user-friendly navigation sections.

---

## Key Features

- Display any WordPress menu
- Horizontal and vertical layouts *(if available)*
- Dropdown (submenu) support
- Alignment control (left, center, right, justified)
- Typography and color customization
- Hover and active state styling
- Responsive menu behavior *(mobile-friendly)*
- Fully responsive design

---

## Requirements

Create a menu in **Appearance → Menus** before using this widget.

---

## How to Enable the Widget

Before using the Nav Menu widget, make sure it is enabled.

**Steps:**

1. Go to **SiteCraft → Dashboard → Widgets**
2. Find **Nav Menu Widget**
3. Toggle to enable it
4. Click **Save Changes**

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-switcher.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-switcher.png)

---

## How to Add the Widget in Elementor

1. Open your page with **Elementor Editor**
2. Search for **“Nav Menu”** under SiteCraft widgets
3. Drag and drop it into your section
4. Select your menu and customize styles

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-scaled.png)

---

## Content Settings

Select and configure your menu.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-content-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-content-scaled.png)

**Options:**

- **Menu** – Choose a WordPress menu
- **Layout** – Horizontal or Vertical *(if available)*
- **Alignment** – Left, Center, Right, Justified
- **Submenu Indicator** – Show/hide dropdown icon
- **Mobile Menu** *(if available)* – Toggle or dropdown style

---

## Style Settings

Customize the appearance of the menu.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-style-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-style-scaled.png)

**Available Controls:**

- **Typography** – Font, size, weight
- **Text Color** – Normal, hover, and active states
- **Background** – Menu and dropdown background
- **Spacing** – Gap between menu items
- **Dropdown Styling** – Colors, borders, shadows
- **Hover Effects** – Animations and transitions

---

## Advanced Settings

Fine-tune layout and responsiveness.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-advanced-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/nav-el-advanced-scaled.png)

**Includes:**

- Margin & padding
- Responsive visibility
- Motion effects
- Positioning
- Background & border

---

## Use Cases

Perfect for:

- Website headers
- Navigation bars
- Sidebar menus
- Footer links

---

## Result

You can now create flexible and fully customizable navigation menus using the **SiteCraft Nav Menu Widget**, improving site usability and structure.