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 |
|---|---|---|
Enabled | Yes/No | Default value: No |
All Categories Label | string | Default value: |
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.