Magento 2 Tutorials

How to Add Categories to Top Navigation Menu in Magento 2

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

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

Default Category Page

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

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

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

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

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

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

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

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.

Share this Story
Load More Related Articles
Load More By Editorial Staff
Load More In Magento 2 Tutorials

Check Also

How A/B Testing Using Humcommerce Can Increase Conversions on Your Magento Store

Magento is one of the most powerful e-commerce ...