Magento 2 Navigation Menu

Set up Magento 2 Top Navigation Menu of No Coding Interfere

by admin

“The first” syntactic structure of your Magento 2 site

Belong to the very topping part of a Magento 2 site, there is no denying that the top navigation menu is frequently most viewed and clicked by the customers to learn the group products of a store.

More essentially, what to be kept in mind is that search engines based on such part to index your sites, and it overlays your product lines.

My advice is, do not wait until revamp, think of the coherence as many times as you can before setting up the top navigation. Different themes might have a variable presentation for the layout of the top Magento navigation.

In the scope of this article, we are going to present how to configure the top navigation menu in the Magento 2 backend.

Wait! Let’s hang up to understand the category tier inside Magento 2

Level 1

Root category is the only seed category in default Magento. It is set as “Default Category”, it is invisible as an option. It is the parent of the menu

Top Navigation Menu in Magneto 2

Default Category and Category Top Navigation

Level 2

It is the top Magento navigation. You can realize it by the unresponsive main menu bar across the whole page at the frontend, just right below the logo, as well as site slogan. When hovering or clicking, it slides down another menu.

One individual category of the top category commonly includes one or more than one options. But it is fine with no lower-tier category, for example: What’s New, Sale.

Level 2 in Luma theme is the line What’s New, Women, Men, Gear, Training, and Sale.

Top Navigation Menu in Magento 2

Top Navigation Menu in the Frontend

Level 3

In the frontend, it is the responsive spreading-down menu right under the top navigation category. Regard the meaning, it contains smaller group product division. In the backend, it appears indent from the first folder name.

Level 3 in Luma, we have under Women: Tops and Bottoms. Men: Tops and Bottoms.  Gear: Bags, Fitness Equipment, Watches. Training: Video Download. As mentioned above, What’s New and Sale does not have a level 3 category.

Category Level 3 in the Frontend

Level 4

Level 4 deepens to the identity of the product line, adopt level 3 as it is generally a parental category. In Magento 2 frontend, it shows another right column menu when clicking on to level 3 option. One level 3 options can take up as many sub-categories as assigned.

It is likely you arrive at the address of the product door after going through another bigger door. In the backend, it is more indented than the level 3 ones.

For example, find level 4 in Luma as: Tops (Women – Men) > Jackets, Hoodies & Sweatshirts, Tees, Bras (excluded in Men) & Tanks; Bottoms (Women – Men)  > Pants, Shorts.

For example, when selecting Tees, you are directed to see all tees available in the store.

Top Navigation Menu in Magento 2

Category Level 4 in the Frontend

Another way to recognize the tier is to look up at bread scum

Top Navigation menu in Magento 2

A glance at bread scum to recognize category tier

The ending one is the smallest level of category.

CHECK OUT Magento 2 Mega Menu to create the best top menu for your website.

How to set up the top navigation menu in Magento 2 using the Admin Panel?

Set category as top navigation category:

Your category needs to be at level 2. Visit our elaborating article How to Add a New Category in Magento 2 to learn how to create Magento 2 category level 2, edit name of the category level 2 and how to impose an organizational category establishment. Multiple store view can use a different root category.

Here, we will provide a quick recap of the task:

  1. At the Admin sidebar, click to Products > Categories.
  2. At the Category page, select Default Category to see a pale orange selection. Click to Add Subcategory and you will be direct to edit content in your newly level 2 category. Click Save after finish input.
  3. Set position of the new Category by drag to the wanted position and drop. Confirm the changes and check the frontend. You have successfully conducted the task!

To delete an unnecessary category, click to the category, waiting for the loading to finish and choose Delete, which is next to Save – the orange button.

It should be put into consideration that too much category in the top Magento navigation will mislead the customer. More or less, users should know a configuration to set the limitation of category inside the top bar menu.


Now, take in steps to limit category level as below:

Step 1.

On the Admin sidebar, click to Stores. Under Settings, select Configuration.

Step 2.

On Configuration Window, scan Catalog and expand, choose the first item Catalog to appear in the first position.

See Category Top Navigation at the fourth position above from the end of list configuration items, click the arrow to expand.

*Note: You only see this configuration by setting the store view, at the upper left corner, as default config.

Magento 2 Top navigation Menu

Step 3.

Now head to settings, the depth of top Magento navigation takes in the category level that’s going to be visible. It receives the global scope, which means applying the same to all websites, stores, store views from your Magento 2 backend. The default value for maximum depth is 0, means there does not restrict the subcategories within, set your number for subcategory levels (from 1 to 4 or more).

Magento 2 Top Navigation menu

Maximal Depth Configuration

Last thought

Theoretically, it works, however, this setting currently has put up with an error, some (visit the link) report that it does not have authorization at the moment. At the time of writing this post, it has not been fixed by the Magento team, but don’t worry, there is an official announcement that the newest version (2.3 Beta) is going to release a patch for this. Other below version will also receive fixation later on. We will update on the matter as soon as possible.


Next Reading Suggestions

© 2019 BSS Commerce owned by THANH CONG INTER ., JSC. All Rights Reserved.
Business registration certificate no. 0106064469 issued by Hanoi Department of Planning and Investment on 19 December 2019.
Legal Representative: Mr. Nguyen Quang Trung.