---
title: "How To Add a Navigation Menu in WordPress?"
url: https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/
date: 2024-12-02
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "Your navigation menu is how visitors find their way around the site, so it should be easy to use on desktop and on phones. The Navigation Menu block in Nexter..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-To-Add-a-Navigation-Menu-in-WordPress_-1024x519.jpg
word_count: 685
---

# How To Add a Navigation Menu in WordPress?

## Key Takeaways

- Nexter Blocks Navigation Menu block adds horizontal, vertical, or mega menu options to a WordPress website.
- Navigation Menu block requires the default WordPress Block editor and the Nexter Blocks plugin, and it is a Freemium block that unlocks extra features in the PRO version of Nexter Blocks.
- Navigation Menu block offers two menu types, WordPress Menu (pro) and Manual Menu, and it can open dropdowns On Hover or On Click.
- Responsive Mobile Menu toggle adds mobile menu support with Select Menu or Standard (pro), plus Toggle, Swiper (pro), and Off Canvas (pro) mobile menu behaviors.

Your navigation menu is how visitors find their way around the site, so it should be easy to use on desktop and on phones.

The Navigation Menu block in Nexter Blocks builds horizontal, vertical and toggle menus with dropdowns and a mobile hamburger menu.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-navigation-menu/)

## Before You Start

- **Edition:** Free for Manual Menu, dropdowns, vertical and toggle layouts and the Toggle mobile menu. **Nexter Blocks Pro** adds WordPress Menu, Mega Menu, Swiper and Off Canvas mobile menus.- **Block to enable:** Navigation Menu, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Where to add it:** in a header template, so the menu shows on every page. See [how to create a header template](https://nexterwp.com/docs/create-header-template-in-wordpress/).

## Learn via Video Tutorial

https://www.youtube.com/watch?v=zTp3x3x1578

## Steps

- Go to **Nexter > Blocks**, search for **Navigation Menu** and turn it on.

![The Nexter Blocks settings page filtered to the Navigation Menu block](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-admin-enable.webp)

- Add the **Navigation Menu** block to your header template and click **Design from Scratch**.

- In **Navigation Content**, choose a **Type**: **Manual Menu** to build the items in the block, or **WordPress Menu** (Pro) to use a menu from Appearance > Menus.

![The Navigation Content panel with Type, Menu Layout and the Navigation Menus list](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-type.webp)

- For Manual Menu, open each item under **Navigation Menus**, set its **Menu Level**, **Link** and **Menu Text**, and click **Add Menu** for more items.

![A menu item opened with Menu Level, Link and Menu Text](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-menu-items.webp)

- For WordPress Menu, choose the menu in **Select Menu**. Its dropdowns come from Appearance > Menus.

![Type set to WordPress Menu with a menu chosen in Select Menu](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-wordpress-menu.webp)

- Pick a **Menu Layout**, then set **Submenu Open** and **Submenu Transition**.

- Open **Mobile Menu**, turn on **Responsive Mobile Menu**, choose **Custom** and a **Menu Type**. Save.

![The Mobile Menu panel with Responsive Mobile Menu, Open Mobile Menu (Screen Width) and Menu Type](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-mobile.webp)

## Navigation Content Settings

| Setting | Options | What it does |
| ------- | ------- | ------------ |
| Type | WordPress Menu (Pro), Manual Menu | Where the menu items come from |
| Select Menu | Your WordPress menus | The menu to show (WordPress Menu only) |
| Menu Layout | Horizontal, Vertical, Vertical Toggle | A row, a stacked list, or a stacked list behind a clickable title bar |
| Navigation Menus | Menu Level (0 Level to 6 Level), Submenu Type (Link or Mega Menu, Pro), Link, Menu Text, Label, Menu Icon Type, Description, Custom Class | The items of a Manual Menu. Level 0 items are top-level; higher levels become dropdown items under the item above |
| Submenu Open | On Hover, On Click | What opens a dropdown |
| Submenu Transition | Slide Up (JS), Fade In (JS), Slide Up, Fade In | How a dropdown appears |
| Toggle Bar settings | Toggle Bar, Toggle Open (Normal, Hover, Click), Title, URL, Prefix Icon, Toggle Icon | The title bar of the Vertical Toggle layout |

## Mobile Menu Settings

| Setting | Options | What it does |
| ------- | ------- | ------------ |
| Responsive Mobile Menu | On / Off | Replaces the menu with a mobile menu on small screens |
| Open Mobile Menu (Screen Width) | Pixels (default 991) | Below this screen width the mobile menu is used |
| Mobile Menu | Custom, Standard (Pro) | Custom reuses the block's menu; Standard shows a WordPress menu you pick |
| Menu Type | Toggle, Swiper (Pro), Off Canvas (Pro) | A hamburger that slides a panel down, a swipeable row of links, or a side panel |
| Navigation Width, Toggle Style, Toggle Alignment, Navigation Alignment | — | Size and position of the mobile panel and the hamburger |
| Mobile Click Close Menu | On / Off | Closes the mobile menu when visitors tap outside it |

On the **Style** tab you style Main Menu, Submenu, Description, Mobile Menu and Mobile Submenu, plus Main Menu Label and Submenu Label when items use a label. Pro adds Web Accessibility styles.

## How It Behaves

- Dropdowns open on hover or click, depending on Submenu Open.- Below the Open Mobile Menu width, the desktop menu is hidden and the hamburger or swiper row is shown.- Mega Menu items show a pattern you design in a wide dropdown.- Manual Menu, dropdowns, vertical layouts and the Toggle mobile menu work the same in the free plugin.

## Limitations

- **In the free plugin, Mobile Menu starts on Standard (Pro).** Choose **Custom** to see Menu Type and the other mobile settings.- **WordPress Menu needs Pro.** Without Pro, a block set to WordPress Menu shows nothing on the page.- Swiper and Off Canvas mobile menus need Pro.

## Troubleshooting

### I cannot find the Navigation Menu block

It is switched off. Go to **Nexter > Blocks**, search for Navigation Menu and turn it on.

### My Select Menu dropdown is empty

Create a menu first under **Appearance > Menus**. WordPress Menu also needs Nexter Blocks Pro.

### The hamburger shows on my laptop

Lower **Open Mobile Menu (Screen Width)**. The mobile menu is used below that width.

## Related Docs

- [Create a mega menu](https://nexterwp.com/docs/create-a-wordpress-mega-menu/)- [Create a toggle menu for mobile](https://nexterwp.com/docs/create-a-wordpress-toggle-menu-for-mobile/)- [Open dropdowns on hover](https://nexterwp.com/docs/open-wordpress-menu-dropdown-on-hover/)- [Create a vertical menu](https://nexterwp.com/docs/create-a-vertical-menu-in-wordpress/)- [Advanced tab options for Nexter Blocks](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)