WordPress is an amazing platform packed with useful features that make site editing a breeze (well, most of the time).. One of them is adding the navigation menu. You can add and adjust by drag and drop to create types of menu or you can custom one with your developer. How to add a navigation menu to WordPress? This article will help you and also give you more suggestions about types of menu, and how to place them.
What do we mean by “navigation menu”?
All websites have a navigation menu. Just as its name suggests, its role is to “navigate” visitors to designated pages of the website through direct links. There are no specific rules for what you should add to the menu, nor are there rules for placing each component where and why. It depends on the personal preferences of the website owner. Overall, a navigation menu will typically have:
– Menu items with links directed to specific pages
– Submenus/dropdowns
– Icons or graphics
How to create a navigation menu to WordPress
Before adding the menu, you must create one. Here is how to do it:
From WordPress dashboard
1. Go to the WordPress admin dashboard
2. Find “Appearance” in the left sidebar
3. Click on “Menus”
This is where you create and customise menus for your site.
How to add items to the menu
1. On the left side, you’ll see several panels with items you can add to your menu
– Pages
– Posts
– Custom Links
– Categories
2. Check the boxes next to the items you want to add to your menu.
3. Click the “Add to Menu” button.
4. Drag and drop the items in the menu structure to arrange them in your desired order.
How to assign the menu to a location
1. Scroll down to the “Manage Locations” section.
2. Check the box for the location where you want the menu to appear, such as:
– Primary Menu
– Footer Menu
– Other theme-defined locations
3. Click the “Save Menu” button.
From The Theme Customiser
To display your menu:
1. In the panels, go to the theme customiser and select”Menus”
2. Select the menu that you want to show on your site
You can set where the menu displays based on:
1. Your theme’s predefined locations
2. Adding a Navigation Menu widget for more options
How to add a navigation menu to WordPress
Once you’ve created and customised your navigation menu, you need to display it on your website. Here are several methods to do that:
Use Your Theme’s Menu Locations
Most themes offer predefined menu locations. To assign your menu to one of these locations:
- Go to “Appearance” > “Menus.”
- Scroll down to the “Manage Locations” section.
- Check the box for the location where you want the menu to appear.
- Click “Save Menu.”
Add a Shortcode
Some themes and plugins allow you to add menus using shortcodes. This method varies depending on your theme or plugin:
- Check your theme’s documentation or plugin settings for available shortcodes.
- Add the shortcode to a post, page, or widget area where you want the menu to appear.
Add to a Widget
You can also display your menu in a widget area:
- Go to “Appearance” > “Widgets.”
- Add a “Navigation Menu” widget to your desired widget area.
- Select the menu you want to display from the widget settings.
- Save your changes.
Add as a code snippet
For advanced users, you can add your menu directly into your site using code snippets. This method involves:
- Adding code to your theme’s functions.php file or using a custom code snippet plugin.
Hooking the menu into your site by adding the following PHP code where you want the menu to appear:
wp_nav_menu(array(
'theme_location' => 'your_menu_location',
'menu_class' => 'your-menu-class',
));Replace ‘your_menu_location’ with the location assigned to your menu and ‘your-menu-class’ with any custom CSS class you want to apply.
For anything related to coding, it’s important to have solid technical knowledge, as mistakes can damage your whole site. Consider consulting your developer team or a WordPress development agency.
Types of navigation menus and their benefits
There are some options for you to choose as each type has its advantage.
Horizontal Navigation
Horizontal navigation menus are typically placed across the top of a webpage, presenting the main menu items in a single row.
- Users can quickly glance at the options available.
- Ideal for websites with fewer menu items, providing a clean and organised look.
- Common layout familiar to most users for a consistent experience.
Vertical Navigation
Vertical navigation menus are positioned along the side of a webpage, displaying the menu items in a single column.
- Can hold a larger number of menu items without cluttering the interface.
- Ideal for websites with extensive categories or subcategories.
- Stays visible while scrolling, making it easier for users to navigate.
Dropdown Menus
Dropdown menus expand to show additional menu items when a user hovers over or clicks on a parent menu item.
- Keeps the main navigation clean by hiding submenus until needed.
- Helps organise complex menu structures into manageable layers.
- Only relevant items are displayed, minimising visual overload.
Mega Menus
Mega menus are expansive dropdown menus that can display multiple columns of options and additional content such as images and descriptions.
- Suitable for large websites with numerous categories, allowing users to see all options at a glance.
- Enhances navigation by grouping related items together, making it easier for users to find what they need.
- Can include images, icons, and descriptions to provide more context.
Sticky Menus
Sticky menus remain fixed at the top of the screen as the user scrolls down the page.
- Users can access the menu at any point without having to scroll back to the top.
- Improves usability, especially on content-heavy pages.
- Encourages users to explore more sections of the website.
Hamburger Menus
Hamburger menus use a three-line icon that, when clicked, reveals the navigation menu.
- Ideal for mobile design, freeing up screen space for content.
- Widely recognised by users, providing a consistent experience across devices.
- Keeps the interface clean and uncluttered, especially useful for modern and minimalist designs.
Conclusion
WordPress makes it easy to create and customise navigation menus for your website. Knowing how to add navigation menu to WordPress, the different types of menus and their benefits will help you pick the best one for your site or have ideas to redesign the current menu.
