The navigation menu plays an important part in the customer funnel effectiveness, but only 16% of e-commerce websites have enough filtering types, attractive design, and clear logic.

So we decided to look into how to create a convenient navigation menu with filters and sliders.

How to edit the default Magento 2 navigation menu?

Default Magento has built-in layered navigation. It allows you to set filters by any product attribute, such as category or price. Let’s look into the matter.

How to edit the top navigation in Magento 2?

The top menu of your Magento 2 website represents the structure of the catalog. It can have up to 4 levels of nesting:

Level 1

The 1st level is the default category. Its name doesn’t appear in the menu.

Level 2

The 2nd level is the main menu displayed on the frontend. In the default Luma theme, this level includes categories like “What’s New”, “Women”, “Men”, “Gear”, “Training”, and “Sale”.

Level 3

At the 3rd level, you can split the main categories into several sections. For example, household appliances can include washing machines and dishwashers.

Level 4

The 4th level gives even narrower subcategories. For example, washing machines can be segmented by brands.

To configure the depth of your top menu, follow these steps:

#1. Log in to the admin panel and navigate to Stores > Settings > Configuration.

#2. In the Catalog tab, choose Catalog and go to the Category Top Navigation section.

#3. In the Maximal Depth field, enter the number of subcategories that you want to show in the top navigation.

top navigation

#4. Save the changes.

→ See how to configure a powerful mega menu in 3 minutes

How to change default filters in your Magento?

#1. Say, your customer wants to find blue shorts. To activate filtering by colors (or any other attribute) go to Stores>Attributes>Product:

go to product attributes

#2. Then find a “color” attribute on the grid:

find color attribute

 

#3. As you can see, it’s not used in the navigation system. Let’s turn it on. Click on it to edit and go to Attribute Information > Storefront Properties. There you will see the next settings:

color attribute settings

 

#4. Choose one of two options: Filterable (with results) or Filterable (no results) – in the Use in Layered Navigation line. The first option shows only those filters for which matching products can be found and the second shows all the possible filters. Set Yes in Use in Search Results Layered Navigation and configure the Position of this attribute in the navigation block.

#5. After that, you need to make the category an anchor. For this, go to Catalog > Category and select the needed category from the category tree.

#6. In the Display Settings section, find the Anchor line and set Yes:

make category an anchor

Save the changes and go to the frontend to test the result. You will get a similar result:

frontend example

How to customize price navigation?

Magento offers 3 types of price navigation:

  • Automatic (Equalize Price Ranges);
  • Automatic (Equalize Product Counts);
  • Manual.

The first two methods calculate navigation steps automatically by price ranges or by product number. And the Manual method allows you to set the value of the navigation step.

#1. Go to Stores > Settings > Configuration:

go to stores configuration

#2. Choose Catalog in the Catalog tab:

go to the catalog

#3. Open the Layered Navigation tab and set the options you need:

automatic price filter
manual price filter

 

Save the configurations.

But what if you want more advanced configurations?

How to create a custom layered navigation menu in Magento 2?

If you want to extend the default Magento 2 settings, you can use one of our solutions. Let’s consider them in detail.

Layered Navigation Lite

Layered Navigation Lite is the module that extends default Magento 2 settings. What are the benefits?

  • It uses AJAX filtering to provide fast browsing of the results. Say, your customer is searching for the white hoodie. Usually, if they choose the white color, the page reloads. But with AJAX technology only the part that changes will be reloaded.
  • This module provides multiple choice of filters. For instance, a user is looking for a sweatshirt from cotton or fleece. So they can choose both materials in the filter section and get relevant results:

multiselect option

Layered Navigation Lite has advanced design. Say, you have a long list of available materials. So you can add vertical scrolling to make this filter compact. Also, it shows the number of items that are available in your shop and is fully compatible with mobile devices.

vertical scrolling

• Let your customers set the price range filter. This plugin allows you to create a handy price slider in Magento.

price slider

And you can easily set all these useful features in your Admin Panel. Go to Stores>Configuration>Amasty Extensions>Price Slider & Filters:

price slider and filters settings

There you can turn on AJAX technology and scrolling on top after results refreshing. Choose the filters for which you want to set the multiselect. Enable the price slider and configure how it will be shown by setting the price step. Add Vertical Scrolling for blocks that are higher than a certain size in pixels.

Go to Layered Navigation Lite

Improved Layered Navigation

The pro version of this plugin includes all the features we have described above, and advanced options.

• The extension has 5 display modes for your filters: labels, drop-down, images, images and labels, text swatches. With their help, you can improve user experience.

filters modes

• If you have multiple filtering options, you can use dependencies to display only the needed filters and hide the others.

• To make your filters even more convenient, you can create attribute mapping. For example, if you have goods with a similar color but different shades, you can combine them in one filtering option by mapping them up in the admin panel:

attribute mapping

• Advanced category tree gives you the freedom to display subcategories most conveniently by choosing between the drop-down and labels modes. Add “See more”/less” buttons, slider with subcategories, let buyers choose multiple subcategories, and more.

• Use advanced filters like “New”, “On Sale”, “Rating”, “In Stock” or create custom ones:

advanced filters

• Moreover, the extension includes all the features of the Shop By Brand module like:

  1. brands slider
  2. CMS pages with the brand content
  3. brand filters in the navigation
  4. “More from this label” block

→ Go to Improved Layered Navigation

→ Check the most popular Q&A on our FAQ about Improved Layered Navigation

Layered Navigation Premium

For stores with bigger catalogs, we offer Layered Navigation Premium. This plugin combines the power of Improved Layered Navigation, Infinite Scroll, and Brands Merchandiser.

You can promote specific products, brands, or groups of products, use drag-and-drop to sort and pin products on a page according to your needs, enable sorting by name, stock, price, newest. Make product selection as smooth as possible by autoloading search results. Add “Back to top” and “Load More” buttons.

→ Go to Layered Navigation Premium

Useful links

Magento 1 vs Magento 2 Improved Layered Navigation

Magento 2 Layered Navigation: Best Settings For SEO

Is Magento 2 menu not showing?

Use Cases of Mega Menu for Magento 2