Your navigation menu helps visitors move between the most important pages on your website, such as Home, About, Services, Blog, and Contact.
In WordPress, the way you create a menu depends on the theme you use. Some themes let you manage menus from Appearance > Menus, while block themes use the Site Editor and Navigation block.
In this guide, we will show you how to create a navigation menu in WordPress, add it to your website, organize dropdown items, and make sure it works properly on desktop and mobile. We will also show you how to do it with the Gutenverse Nav Menu block.
What Is a WordPress Navigation Menu?
A WordPress navigation menu is a group of links that helps visitors move between important pages on your website.
Most websites place the main menu in the header. However, you can also add menus to the footer, sidebar, landing pages, or other page sections.
For example, a basic business website might use:
Larger websites may also use dropdown menus to organize service pages, product categories, portfolio items, documentation, or other resources.
You don’t need to add every page on your website to the main menu. Instead, focus on the pages visitors are most likely to need.
Your menu should make your website easier to navigate, not simply list everything you have published.
Before You Start: Know Which WordPress Menu Workflow You Use
WordPress now provides different ways to manage navigation menus depending on the type of theme you use.
If you use a classic theme, you may still create and manage menus from Appearance > Menus. From there, you can assign your menu to locations such as Primary Menu, Footer Menu, or Mobile Menu.
If you use a block theme, go to Appearance > Editor to manage your navigation menu. From there, open your website header, select the Navigation block, and add, remove, or rearrange the menu links you want to show.
So, don’t worry if your dashboard looks different from another WordPress tutorial. The steps depend on the type of theme you use.
In this guide, we will focus on creating the menu first, then displaying and customizing it with the Gutenverse Nav Menu block.
Step 1: Plan Your Menu Items
Before you start creating the menu in WordPress, decide which pages should appear in it.
For most small websites, five to seven top-level menu items are usually enough. Too many items can make the menu harder to scan, especially on smaller screens.
Start with the pages visitors are most likely to look for.
Website type
Useful menu items
Freelancer portfolio
Home, Work, Services, About, Contact
Small business
Home, Services, Pricing, About, Blog, Contact
Agency website
Home, Services, Case Studies, About, Resources, Contact
Personal blog
Home, Blog, Categories, About, Newsletter, Contact
Use menu labels that visitors can understand immediately. For example, Services is usually clearer than What We Do, while Contact is easier to understand than something like Start a Conversation.
You can use more creative wording in your page content, but navigation labels should stay simple and familiar.
Step 2: Create a Menu in WordPress
If your WordPress dashboard includes Appearance > Menus, you can create your menu from there.
At this point, you just need to create and arrange the links that will appear in your menu.
If your dashboard has Appearance > Menus, create the menu there and save it.
If you don’t see Appearance > Menus, go to Appearance > Editor, open your header, and select the Navigation block. From there, you can add, remove, and rearrange your menu links.
Once your menu structure is ready, you can move to the next step and add the Gutenverse Nav Menu block to your website.
Step 3: Add the Gutenverse Nav Menu Block
After creating your menu, you can add it to your website with the Gutenverse Nav Menu block.
If you want to place the menu in a site-wide header:
After you add the block, select it and open the block settings on the right side of the editor.
Find the Menu option, then choose the menu you created in the previous step.
Your menu links should now appear inside the header.
If you want to place the menu on only one page instead, open that page in the WordPress editor and add the Gutenverse Nav Menu block there using the same steps.
Step 4: Adjust the Menu Alignment
Next, adjust the menu so it fits properly inside your header.
The Gutenverse Nav Menu block lets you control the menu alignment. Depending on your header design, you may want to use:
Focus on the basic layout before adding more styling.
Make sure the menu is easy to read and sits properly beside your logo, button, or other header elements.
If your header contains several blocks, use List View to select the exact element you want to edit.
You can also read the Gutenverse guide on how to navigate through your blocks. It can help when your header contains multiple wrappers, columns, buttons, logos, and navigation elements.
Step 5: Add Dropdown Menus Only When They Help
Dropdown menus can help you group related pages and keep the main navigation shorter.
For example:
However, avoid putting too many pages inside a single dropdown.
For example, a dropdown like this may become difficult to use:
You should also avoid vague menu labels such as More or Pages when visitors cannot tell what they contain.
With the Gutenverse Nav Menu block, you can also customize the look of your menu and dropdown items.
Use dropdowns to group related pages and make your navigation easier to understand, not just to fit more links into the header.
Use dropdowns to group related pages and make your navigation easier to understand, not just to fit more links into the header.
Step 6: Style the Menu
Your navigation menu should match the rest of your website while remaining easy to read.
Start by adjusting these settings:
Gutenverse lets you customize the Nav Menu block directly inside the Gutenberg editor. This keeps your navigation design in the same workflow as the rest of your website.
You can adjust the appearance without constantly switching between custom code, theme options, and separate plugin settings.
Also make sure visitors can clearly see which menu item they are hovering over or currently viewing. Keep these effects noticeable but simple.
Step 7: Set Up the Mobile Menu
After setting up the desktop menu, check how it works on tablet and mobile.
A menu that looks good on desktop may not fit properly on a smaller screen. Menu items can wrap, dropdowns can become harder to use, and the logo may take up too much space next to the menu icon.
The Gutenverse Nav Menu includes mobile settings that let you control how the menu appears on smaller screens.
Use this checklist when setting up your mobile menu:
You can also adjust the responsive settings separately for desktop, tablet, and mobile.
For more details, you can read the Gutenverse responsive styling guide.
Step 8: Save and Test Your Navigation Menu
Once you finish setting up the menu, save your changes in the editor.
If you edited the Header in the Site Editor, WordPress may ask you to confirm which changes you want to save. Make sure the Header and Navigation changes are selected before you continue.
After saving, open your website and test the menu from the front end.
Check that:
You should also remove any menu item that no longer needs to be there.
The final goal is to make sure visitors can move through your website without getting confused.
Common Mistakes When Making Navigation Menu
Even a simple menu can become difficult to use if it has too many links or unclear labels.
Here are some common mistakes to avoid:
Before you publish the menu, open your website and test it as a visitor. Make sure every label is clear, every link works, and important pages are easy to find.
FAQ
Create your menu links first, then add a WordPress Navigation block or Gutenverse Nav Menu block. Select your menu, adjust the style, and test it on desktop and mobile.
Classic themes usually use Appearance > Menus. Block themes usually use Appearance > Editor and the Navigation block.
Yes. WordPress includes a Navigation block, while Gutenverse provides a Nav Menu block with more styling options inside Gutenberg.
Add submenu items under a parent menu item. In classic menus, drag the item slightly to the right. In block themes, use the Navigation block controls.
For most small websites, five to seven top-level items are enough. Group extra links under clear dropdown menus.
You can check that you selected the correct menu, placed it in the right location, and saved your changes. If you use Gutenverse, also check the selected menu in the Nav Menu block settings.
Final Thoughts
Your navigation menu helps visitors move between the most important pages on your website, such as Home, About, Services, Blog, and Contact.
In WordPress, the way you manage your menu depends on the theme you use. Some themes use Appearance > Menus, while block themes use the Site Editor and Navigation block.
The important thing is to keep your menu simple, use clear labels, organize dropdown items properly, and make sure everything works well on desktop and mobile.
If you use Gutenverse, the Gutenverse Nav Menu block gives you another way to build and customize your navigation directly inside Gutenberg.
Once your menu is ready, test every link and make sure visitors can quickly find the pages they need.
To get more Gutenverse features and more control over your website design, you can explore Gutenverse PRO plans and choose the option that fits your website.
