UB Mega Menu v1.1.9 has finally arrived! This release focuses on adding a new Drill-down menu on mobile, reducing the number of DOM elements and incremental bug fixes. We believe building an effective Magento navigation will become even better with v.1.19 release.
[NEW] Drill-down menu on mobile
In addition to the default Accordion menus, you now have the 2nd option for implementing mobile navigation on your Magento 2 store -- Drill-down menus.
We first experimented with a drill-down menu on top of Magento PWA Studio and strived for the native mobile experience. View this PWA demo, you will see the drill-down navigation in place.
The drill-down menu implemented on top of Magento PWA Studio
In UB Mega Menu v1.1.9, it’s now possible to switch between the two menu approaches on mobile easily:
- Accordion: a pull-down menu where clicking the main item expands the section below it
- Drill-down: shows only the submenus of the last selected menu item
The drill-down menu starts by displaying the primary menu items (categories); once a user selects one of them, the corresponding submenu items (subcategories) are shown instead of the original menu items. The user can easily navigate up in the navigation hierarchy by tapping the button Back inside the menu. For small screens as off-canvas, the drill-down menu is handy and lets you organize your navigation much more flexibly.
UB Mega Menu drill-down menu
UB Mega Menu with enabled sticky drill-down menu
UB Mega Menu -- vertical drill-down menu context
However, if your menus become overly deep, we generally recommend Accordion for off-canvas navigation instead. You use accordions for the primary menu items, with each accordion expanding to expose its corresponding submenu items. This allows users to access subcategories quickly without waiting for an extra page load.
Default UB Mega Menu’s accordion menu
[NEW] Optimized codebase to reduce the node count
Another important part of the UB Mega Menu v1.1.9 is the further improvement of the module’s performance by reducing the number of DOM (Document Object Model) elements.
There are a couple of good reasons why the DOM size matters:
- Less DOM elements mean better page load performance and network efficiency. The browser has to parse the HTML, construct the render tree, etc. and every time user interacts or something in HTML changes, the browser has to compute this again. Thus, a large DOM tree in combination with complicated style rules can slow down rendering and make a huge work for the browser.
- Reduce memory usage: a smaller DOM tree enables Javascript functions -- which are used to access DOM elements -- to use lower memory to process. A large DOM tree often includes a large number of nodes, which means slower DOM access in Javascript and can overwhelm the memory capabilities of your users’ devices.
- Smaller DOM size helps to reduce the size of the HTML document (in KBs) which in return makes improvements to TTFB (Time to First Byte).
Even though there are a lot of facets of performance, the DOM size is a good start to make a critical impact on the overall performance of your Magento site. And here’s how the HTML tags changed in our latest UB Mega Menu v1.1.9 (with the sample content like our demo):
Optimized DOM elements in UB Mega Menu v1.1.19
Tell us your thoughts
So, what do you think about the new improvements in UB Mega Menu v1.1.9 and the utilization of drill-down menus in mobile designs? Which type of navigation (accordions or drill-down) do you prefer? Why? We love to hear your feedback and ideas. Visit our helpdesk or get in touch with us via info (at) ubertheme.com.
