How to Set Up Magento 2 Top Navigation Menu [No code required]

Setting up a navigation menu is a must for Magento 2 stores. Without it, search engines can not index your website properly and you’ll lose a lot of customers since the top navigation menu is one of the most viewed and clicked sections.

If you’re starting a new business on Magento 2, then this blog is definitely for you. We will explain how the structure of category tier, and how to config a top navigation menu easily.

No need to be an expert developer or have vast experience in online business, just read our article and you’ll be able to do this task.

Category Tier in Magento 2

First of all, let’s learn about the category tier in Magento 2. There are 4 levels.

Level 1

The first level is the only seed category in Magento 2 default. It’s set as Default Category and doesn’t appear on the storefront menu. You can think of it as the parent of other smaller categories in the menu.

Level 2

In Magento, the top navigation is typically an unresponsive main menu bar that spans the entire page, located just below the logo and site slogan on the frontend. When you hover or click on it, another menu slides down.

Each top-level category in this navigation usually includes one or more subcategories. However, some top-level categories might not have any subcategories, such as “What’s New” or “Sale.”

In the Luma theme, the top-level categories include:

• What’s New
• Women
• Men
• Gear
• Training
• Sale

These categories are displayed in a line and may or may not have lower-tier categories under them.

Level 3

In the frontend, the Level 3 navigation in Magento is a responsive dropdown menu that appears under the top navigation category when hovered over or clicked. This menu contains smaller groupings of product divisions.

In the backend, these categories appear indented under their parent category, indicating their hierarchical position.

Level 4

In Magento, Level 4 navigation represents a deeper layer within the product hierarchy, providing specific product lines under the broader Level 3 categories. In the frontend, this level is typically shown as an additional right column menu that appears when clicking on a Level 3 option. Each Level 3 option can have multiple Level 4 sub-categories.

In the backend, Level 4 categories are displayed with an even greater indentation compared to Level 3 categories, indicating their subordinate position.

How to Set Up Magento 2 Top Navigation Menu

Create a category

• Go to Catalog > Categories
• Select Default Category and it will be highlighted in orange
• Click Add Subcategory and fill out the necessary fields to create a new level 2 category, and modify its content
• Press Save

After that, you can drag and drop new categories to set their display orders. Then, confirm your changes and go to the frontend to check again.

Setting top navigation depth

By setting the maximum depth, you can control the visibility of subcategories within the top navigation, enhancing the user experience by limiting the number of categories displayed in the navigation menu.

• Go to Stores > Settings > Configuration > Catalog > Catalog > Category Top Navigation
• Fill in Maximal Depth: leave it 0 if you don’t want to restrict navigation depth

How to Fix the Top Navigation Menu Problems in Magento 2

1. Menu not showing

Magento store admins and developers often encounter this issue: the navigation menu might not appear on their website. This problem negatively affects the user experience and makes it difficult for customers to find their way around.

Step 1: Add a new root category

• Go to Catalog > Categories
• Select Add Root Category

• Fill out the information in the General Information* tab:

  • Enable Category: Set Yes
  • Include in Menu: Set Yes
  • Category Name: Enter the root category name
  • Press Save

Step 2: Add a subcategory to the new root category

After you’ve created a new root category, you need to add a subcategory to it.

• Click on the new category
• Choose Add SubCategory

• Repeat the same steps when creating the root category: Enable Category, Include in the Menu, Enter Category Name
• Save the changes

Note: Create as many subcategories as you need to.

Step 3: Choose the new Root Category

• Go to Stores > Settings > All Stores
• Open the main menu store by clicking on the link in Store column

• In the Root Category field, choose the new root category

• Press Save Store to confirm your settings

2. Menu not working properly on mobile devices

Another common problem in Magento 2 is that the menu not working well in mobile view, frustrating many customers which is definitely not good for business.

The solution is actually very simple: just install a mobile menu extension. This plugin lets you customize your store’s mobile menu, ensuring it functions properly on all mobile devices. It also offers a user-friendly interface, making it easy for customers to navigate your website and find what they need.

Wrap up

The Magento navigation menu plays a crucial role in ensuring a smooth shopping experience, influencing how customers browse, locate products, and decide on purchases. With a good top navigation menu, stores can see significant changes right away.

Hope that with our blog, you can now find it easy to set up a Magento 2 navigation menu as well as fix related issues. Contact us if you have any questions or struggles.