--- 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-04-14 author: "Aditya Sharma" description: "A well-designed navigation menu is crucial for a website to improve the user experience as it helps visitors easily navigate through the site and find the desired information.   With the..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-To-Add-a-Navigation-Menu-in-WordPress_-1024x519.jpg word_count: 861 --- # 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. A well-designed navigation menu is crucial for a website to improve the user experience as it helps visitors easily navigate through the site and find the desired information.   With the Navigation Menu block from the Nexter Blocks, you can easily add a horizontal, vertical, or mega menu to your WordPress website. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-navigation-menu/) ## Required Setup - Make sure the default WordPress Block editor is active.  - You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated. - Make sure the Navigation Menu block is activated, to verify this visit Nexter → Blocks → and Search for Navigation Menu and activate. - This is a Freemium block; to unlock the extra features, you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text). ## Learn via Video Tutorial https://www.youtube.com/watch?v=zTp3x3x1578 ## How to activate the Navigation Menu Block? Go to  - **Nexter **→ **Blocks ** - **Search **the block nameand**turn on the toggle**. ![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-activation-new.png) ## Key Features - **Two Menu Types ** - You can add a normal menu (pro) or a custom repeater menu. - **Add Different Menus** - You can easily add a horizontal menu, [vertical menu](https://nexterwp.com/docs/create-a-vertical-menu-in-wordpress/) or [mega menu](https://nexterwp.com/docs/create-a-wordpress-mega-menu/) (pro). - **Mobile Menu** (freemium) - You can easily add a different mobile menu. ## How to Use the Navigation Menu Block in WordPress? To use the Navigation Menu block, you should add it in the header template so the menu is available on the entire website.  > *Note:* To create the header template, you can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/). ### Navigation Content In the **Type** section, you have to select the menu type. Here, you’ll find two options -  ![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-navigation-content.gif) - **WordPress Menu** (pro) - To create a menu using the default WordPress menu. - **Manual Menu** - To create a custom menu using a repeater. Select the option as per your requirements, options will vary based on the menu type.  Let’s select the **WordPress Menu** option here. > *Note: To use the ****WordPress Menu**** option, make sure you have created at least one menu in the default WordPress menu section. To check, go to ****Appearance**** > ****Menus****.* From the **Menu Layout** section, you have to select the menu direction. Here, you’ll find three options -  - **Vertical Toggle** - For [creating a vertical toggle menu](https://nexterwp.com/docs/create-a-wordpress-vertical-toggle-menu/). - **Horizontal **- For creating a horizontal menu. - **Vertical **- For [creating a vertical menu](https://nexterwp.com/docs/create-a-vertical-menu-in-wordpress/). Select the option that fits your requirement, options will vary based on the option selected.  Let’s select the **Horizontal **option here. Then, in the **Select Menu** dropdown, you’ll find all your menus. Select the menu you want to add. From the** Alignment** section, you can align the navigation menu items. From the **Submenu Open** section, you can select the dropdown menu behavior. Here, you’ll have two options -  - **On Hover **- To [open the dropdown menu on hover](https://nexterwp.com/docs/open-wordpress-menu-dropdown-on-hover/). - **On Click **- To [open the dropdown menu on click](https://nexterwp.com/docs/open-wordpress-menu-dropdown-on-click/). Select the option as per your requirement. Then, from the **Submenu Transition** dropdown, you can select different effects for the dropdown menu. ### Mobile Menu (freemium) By turning on the **Responsive Mobile Menu** toggle, you can make the menu mobile friendly. ![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-mobile-menu.gif) From the **Open Mobile Menu(Screen Width)** section, you can specify the minimum width for enabling the mobile menu. Then, from the **Mobile Menu** section, you can select the menu for the mobile. Here, you’ll find two options -  - **Select Menu **- To use the selected desktop menu as the mobile menu. - **Standard** (pro) - With this option, you can select a different menu for the mobile menu. Let’s select **Standard** here. > *Note: If you’ve selected ****Manual Menu**** in the ****Navigation Bar****, then you’ll see two options in the ****Mobile Menu ****section, ****Standard**** (pro) and ****Custom****.* From the **Select Menu** dropdown, you have to select your menu. Then, from the **Menu Type** section, you can select different mobile menu behaviors. Here, you’ll find three options -  - **Toggle** - To [create a toggle mobile menu](https://nexterwp.com/docs/create-a-wordpress-toggle-menu-for-mobile/). - **Swiper** (pro) - To [create a swiper mobile menu](https://nexterwp.com/docs/create-a-swiper-menu-for-mobile-in-wordpress/). - **Off Canvas** (pro) - To [create an off canvas mobile menu](https://nexterwp.com/docs/create-an-off-canvas-mobile-menu-in-wordpress/).  Based on the option selected, you’ll see relevant settings. From the **Navigation Alignment** section, you can align the mobile menu items. By turning on the **Mobile Click Close Menu** toggle, you can allow users to close the mobile menu by clicking anywhere on the page. ## How to Style the Navigation Menu Block? To style the Navigation Menu block, you’ll find all the styling options under the **Style** tab. **Main Menu** - From here, you can style the main menu item background, typography, color, indicator icon size, etc. ![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-style.png) **Main Menu Label **- From here, you can style the main menu label added in the manual menu item when you select the **Manual Menu** from **Type** under **Layout > Navigation Content**. **Sub Menu** - From here, you can style the sub-menu. **Description** - From here, you can style the description added in the manual menu item. **Mobile Menu** - From here, you can style the mobile menu. **Mobile SubMenu **- From here, you can style the mobile sub menu. **Extra Options** - From here, you can adjust the menu hover effect. **Web Accessibility** - From here, you can style the menu items for web accessibility. Advanced options remain common for all our blocks, you can explore all it options from here. [View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)