Good news! We’ve pushed our UB Mega Menu module a step further to bring more and better functionality.
Today, we’re happy to announce the release of UB Mega Menu v1.2.4 which gives you the flexibility of native off-canvas layout on Desktop. Another bonus in this release is the markup is revamped and optimized.
Why Off-canvas on Desktop?
Last month, our team had a chance to work on a custom Magento 2 project that implemented Walmart-like navigation with an off-canvas menu enabled on the Desktop. We were so impressed that we wanted to make that style of layout available for UB Mega Menu users.
Off-canvas layouts are common and useful for both mobile and desktop layouts. If you’ve used Amazon or Alibaba websites then you’ve seen an off-canvas menu on the Desktop. When you click the hamburger icon, a panel slides in from the left.
Setting up the off-canvas on Desktop is great for sites that have multiple levels of content hierarchy or menus with Categories that don’t fit in a traditional top horizontal navigation bar. An off-canvas menu is also perfect for some sites that need more room than the width of their layout allows.
Let’s look into the new off-canvas menu and other goodies that UB Mega Menu v1.2.4 brings.
Flexible menu options with UB Mega Menu v1.2.4
UB Mega Menu -- Flexible Menu Types
UB Mega Menu makes use of a well-established pattern for navigation that can be used to create multiple menus -- main menu, vertical sidebar menu, footer menu -- on your Magento 2 site. Depending on the specific position you assign the menu, there are different menu types for you to choose from:
- Main Menu: position the menu at the top of the page. You can set up the main menu with two options:
- Standard Horizontal menu on the Desktop (this menu will be transformed to an off-canvas menu on Mobile/Tablet Portrait).
- Off-canvas menu on all devices: If enabled, the off-canvas menu is always applied to all devices (Desktop, Tablet, Mobile). And the off-canvas has 3 preset sub-menu types: Vertical/Accordion/Drilldown menu.
- Sidebar: position the menu on the sidebar of the page. The vertical sidebar menu can be switched among 3 preset types:
- Vertical: a vertical menu in the left sidebar with the sub-menus that expand right. The vertical menu is available for Desktop and Landscape Tablets only.
- 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
- Footer: position the menu at the bottom of the page. Using UB Mega Menu to set up and manage the links to pages you don’t want to feature in the main menu like Terms of Service, Return Policies, or FAQ.
Apart from the main menu, sidebar, footer positions, you can also assign a menu to a custom position of your choice. If it is enabled, an additional CSS style of the menu might be needed to adapt the menu to your custom position.
Since the off-canvas functionality has been heavily extended in v1.2.4, it will be handy if you want to experiment with your mega navigation, especially the off-canvas menu enabled on all devices. All the mega menu types in v1.2.4 can be easily enabled within the module’s built-in settings.
A quick tour screenshot
Let’s take a detailed look at the new UB Mega Menu v1.2.4:
Off-canvas on Desktop -- Vertical submenu type:
Off-canvas on Desktop -- vertical submenu type
Off-canvas on Desktop -- Drill-down submenu type:
Off-canvas on Desktop -- drill-down submenu type
Off-canvas on Desktop -- Accordion submenu type:
Off-canvas on Desktop -- Accordion submenu type
Sidebar Menu -- Vertical submenu type:
Sidebar Menu -- Vertical submenu type
Footer Menu:
Footer Menu type
Hope you enjoy the new 1.2.4.
As we’re building this for you, if you have any ideas or features that you’d like to see then we’d be more than happy to hear about them. Please leave your feedback and share your experience in the comments.
