--- 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 includes a Navigation Menu block that allows users to add horizontal, vertical, or mega menus to their WordPress website. - The Navigation Menu block is a Freemium feature; the PRO version unlocks additional menu types and functionalities. - Users can create a mobile-friendly menu by enabling the Responsive Mobile Menu toggle in the Navigation Menu block settings. - The Navigation Menu block offers styling options for main menu items, sub-menus, and mobile menus under the Style tab. 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/) ## Frequently Asked Questions **Q: What should I do if the Navigation Menu Block isn't showing up?** A: If the Navigation Menu Block isn't visible, ensure that the Nexter Blocks plugin is installed and activated. You also need to activate the Navigation Menu block by navigating to Nexter u2192 Blocks and toggling it on. This step is crucial because without activation, the block won't be available for use. **Q: What are the best practices for styling the Navigation Menu Block?** A: When styling the Navigation Menu Block, focus on the Main Menu and Sub Menu settings under the Style tab. Adjust background colors, typography, and hover effects to enhance user experience. Consistent styling helps maintain your site's branding and improves navigation clarity. **Q: How do I set up a mobile-friendly navigation menu?** A: To create a mobile-friendly navigation menu, enable the Responsive Mobile Menu toggle in the block settings. You can specify the minimum screen width for the mobile menu and choose between using the desktop menu or a different mobile menu. This ensures that your navigation adapts to various device sizes. **Q: Are there any limitations with the free version of the Navigation Menu Block?** A: The free version of the Navigation Menu Block has limitations, such as access to only basic features. To unlock advanced options like the mega menu and additional styling capabilities, you'll need the PRO version of Nexter Blocks. This upgrade can significantly enhance your menu's functionality.