was successfully added to your cart.

How to Add Categories to Top Navigation Menu in Magento 2

How to add categories to top navigation menu

Do you have a lot of categories in your ecommerce store? Do you want to control which categories you want to display on the top navigation menu? We’ll discuss in this tutorial how to:

But first, a little intro about the Top Navigation Menu

Top navigation menu of your ecommerce website is the gateway to different departments of your store. Each department with its own set of products. While the theme of your ecommerce website may vary, the working of your top navigation menu remains the same.

Your top menu is the first thing visitors see on your website. It is essential to plan out the categories which you want to display in the top navigation. The placement and menu level of a category in the top navigation can increase or decrease sales of its products.

Menu level is the number of clicks your category is from the top menu.

  • The first level is the Root category (named Default Category in the category tree). Root category is the container which keeps your navigation menu and is not displayed on the storefront.
  • The second level is the displayed top navigation menu.
  • The third level is the drop down list which appears when you hover over a category menu.
  • And so on.

Adding Categories to Top Navigation Menu

Step 1: Go to Products => Categories (under Inventory)

Categories-submenu-in-Products-1024x470

You’ll be displayed the Default Category page, with category tree on the left sidebar.

Default-Category-Page-1024x508

Here you can see all the categories of your store – including the categories which are disabled in grey color. For example, the screenshot above shows that Collections and Promotions categories are disabled.

Step 2: Click on the category you want to include in the top navigation menu.

Watches-subcategory-1024x470

When you click on a category in the category tree, you’ll be displayed the details page for that category.

Let’s take Watches subcategory as our example. This is how our store top menu looks like right now:

Gear-Category-without-Watches-subcategory-in-top-menu-1024x355

Step 3: Toggle Include in Menu setting to ‘Yes’ to include the category in the top navigation menu.

Similarly, you can toggle this setting to ‘No’, if you don’t to show the category in the top menu.

Step 4: Click on Save button in the top right corner of the page to save the configuration.

As we have added the Watches subcategory to the Gear category in the top navigation menu, it is now reflected in the storefront.

Gear-category-with-Watches-subcategory-in-top-menu-1024x356

Say you have many subcategories but you only want to show two or three of them in the top menu. You can use the Include in Menu setting to manage subcategories in top menu as well.

Convert-more-visitors-to-buyers

Managing Depth of the Top Navigation Menu

Step 1: Go to Stores => Configuration (under Settings)

Configurations-submenu-in-Stores-Settings-1024x508

Step 2: Expand Catalog tab from the left sidebar and click on Catalog.

Catalog-configurations

Step 3: Expand the Category Top Navigation section.

Set-Maximal-Depth-of-Category-Top-Navigation

Step 4: Uncheck the Use System Value box and set the Maximal Depth you want for your categories top navigation menu.

The default value of this field is set to ‘0’, which means there is no limit to the number of subcategories that can be added to this category.

Setting a maximal depth limits the menu levels you can create in your top navigation menu.

Step 5: Click on Save Config button in the top right corner to save the configuration.

You’ll be prompted to refresh cache and indexers for invalidated cache and index types via a system pop-up message.

Cache-and-Index-Management-message-1024x239

Follow these steps to flush the cache.

Step 6: Click on the “indexers are invalid” link in the pop-up message to refresh indexes.

You’ll be displayed the Index Management page.

Index-Management-1024x397

Select the invalidated index and select Update on Save from the drop down list as shown. Click on Submit button to schedule reindexing.

When Magento finishes the reindexing, your maximal depth changes will become visible on the store front.

This brings us to the end of our tutorial on how to add categories to top navigation menu in Magento 2.

Editorial Staff

About Editorial Staff

We are a team of Magento ecommerce developers and SEO experts at Humcommerce. We write about anything and everything which can help you run your Magento 2 ecommerce store better.