>Set up Magento 2 Top Navigation Menu of No Coding Interfere

Set up Magento 2 Top Navigation Menu of No Coding Interfere

“The first” syntactic structure of your Magento 2 site

Belong to the very topping part of a Magento 2 site, there is no denial that 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 much times as you can before setting up the top navigation. Different themes might have variable presentation for the layout of top navigation. In the scope of this article, we are going to present how to configure top navigation menu in the Magento 2 backend.

Wait! Let hung up to understand 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 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. Like mentioned above, What’s New and Sale does not have 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 generally parental category. In Magento 2 frontend, it shows to another right column menu when clicks to level 3 option One level 3 options can take up as much sub-categories as assigned. It is likely you arrive at the address of the product door after going through other 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
Glance at bread scum to recognize category tier

The ending one is smallest level of category.

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

Set category as top navigation category:

Your category need 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 to 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 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 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 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 appear on 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 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. 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 work, however, this setting currently has put up with error, some (visit the link) report that it does not have authorization at the moment. At the time of written this post, it has not been fixed by Magento team, but don’t worry, there is an official announcement that the newest version (2.3 Beta) is going to release patch for this. Other below version will also receive fixation later on. We will update on the matter as soon as possible.