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:
- Add categories to the top navigation menu of your Magento ecommerce website.
- Manage depth of the top navigation menu.
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)
You’ll be displayed the Default Category page, with category tree on the left sidebar.
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.
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:
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.
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.
Managing Depth of the Top Navigation Menu
Step 1: Go to Stores => Configuration (under Settings)
Step 2: Expand Catalog tab from the left sidebar and click on Catalog.
Step 3: Expand the Category Top Navigation section.
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.
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.
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.
