Horizontal layered navigation implementation in Magento 2

The task was to add horizontal layered navigation on the category pages above the list of products. Every option in the filter has to be made as a column with scrolling option.

The element “div.sidebar.main” containing filters locates under the element “main” containing the products in Magento 2. Swap them at first. Add a xml- file <theme_dir>/Magento_Theme/page_layout/2columns-left.xml with the following content:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
 <move element="div.sidebar.main" destination="columns" before="main"/>
</layout>

Then customize the style of the element “div.sidebar.main” to make it spread horizontally for the full width. Do this using these CSS-rules:

• float: none;
• width: 100%;

The result will be smth like this:

Displaying layered navigation’s options as columns

Find the container with layered navigation (div element with the class “filter-options” in a standard package) and add the following CSS rule:

• display: flex;

You’ll get the image like this:

It isn’t the required result but I’ve got the layered navigation’s options displayed as a column above the list of products.

At the next step, it was decided to install the module Manadev_LayeredNavigation. After its installation the layered navigation’s options got this look:

Adding scrollbar to the layered navigation

The final step is to limit the columns height of layered navigation’s options and to add a scrollbar.

The simplest way to do this is to use CSS-rules. Add the following rule to every element containing the list of filters:

• max-height: 333px;
• overflow: auto;

You’ll get an image like this:

The next task was to customize scrollbar. Read more about this in my post Scrollbar customization in Magento 2