https://github.com/magesuite/navigation-mega-dropdown

Thanks to this module it is possible to configure a mega dropdown for desktop navigation. The mega dropdown displays all categories from a root category.

Installation

This module is optional

composer require "creativestyle/magesuite-mega-dropdown" ^2.0.0

Admin settings

Megadropdoen can be enabled in Stores -> Configuration -> MageSuite -> Navigation

in Mega dropdown navigation tab:

Settings:

Name	Value	Comment

Name

Value

Comment

Enabled

Yes/No

Default value: No

All Categories Label

string

Default value: All Categories

Maximum 3rd level categories

number

Default value: 99

Maximum number of 3rd level categories that will be displayed in mega dropdown. If there are more categories then this limit, we will display "more..." link below pointing to parent category.

Additional settings are added to the category edit form: Catalog -> Categories -> [category] Set root category Include in main bar setting ads yes. Category name will be replaced with the name provided Mega dropdown Navigation configuration.

Clear Navigation cache type after changes.

Backend

Backend part of this documentation should be added

Frontend

Scripts

Megadropdoen script I located in components/navigation/navigation-mega-dropdown

It is initialized on HTML element [data-category-identifier="all-categories"]

if (
    navigationElement.querySelector(
        '[data-category-identifier="all-categories"]'
    )
) {
    NavigationClass = NavigationMegaDropdown;
}

class NavigationMegaDropdown extends Navigation It modifies the Navigation flyout behavior: skips adjusting column count for "All categories" root list, adjusts the number of submenu columns: the goal is to have as few columns as possible when keeping flyout's height bellow the given max height.

Styling

Html classes are the same as in the standard navigation flyout and styling is provided in navigation.scss file. there is an additional class: cs-navigation__flyout--all-categories that allows styling customizations in a child project.

MageSuite Developer Documentation

NavigationMegaDropdown (optional)