UB Mega Menu v1.2.4

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. Continue reading

Magento 2 - UB Mega Menu showcase

Generally speaking, an e-commerce site has a clear purpose: it needs to sell. Although there is no end-all be-all answer to this optimizing conversion, improving the navigation of your online stores can lead directly to increased sales.

After looking at several hundred Magento 2 sites, we realized that the best way to learn how you can improve your own store navigation in both looks and functionality is to see the real-life examples of how Magento 2 websites figure out a way to create a frictionless navigation experience.

That’s why we put together a collection of online stores built exclusively with Magento 2 and our UB Mega Menu module. It covers verticals such as sporting & recreation goods, luxury goods & jewelry, sports nutrition, and more. Continue reading

UB Mega Menu v1.2.0

We’re happy to announce the release of UB Mega Menu v1.2.0 that brings a new menu type -- horizontally stacked category dropdown. This simple solution is handy for a massive retail store with deep level categories.

Let’s take a closer look and see how you can experiment with your mega navigations.

Multiple horizontal menu levels

With the horizontally stacked category dropdown, the mega menu is visually divided into the 3-level structure: Main menu > Submenu 1 > Submenu 2.

On mouse hover, each primary category branches into submenus with corresponding second-level and third-level subcategories visible at once in one dropdown.

Magento 2 mega menu - Horizontal and Vertical menus

New menu type -- Horizontally stacked category dropdown -- UB Mega Menu

Continue reading

Jul 30, 2020 Update: The new v1.0.5 has just been released with optimized LESS & incremental improvements.
Jun 25, 2020 Update: The Furniture theme is now available for download.

We’re happy to announce the new Furniture Homepage added to our premium Magento 2 theme -- UB Trex Pro, in addition to the default Fashion Homepage. With this lightweight and responsive furniture layout, you will have your own Magento 2 furniture store up and running in little to no time.

Let’s start off by looking at how you can craft a fully functional website for your furniture-related business with the UB Trex Pro’s pre-designed exclusive homepages, inner pages, and the bundle of goodies built-in. Continue reading

ub mega menu v119

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. Continue reading

Magento PWA Menu: Hamburger vs Tab Bars

When it comes to the PWA Studio project, should we stick with the classic Hamburger Menus or switch to Tab Bars on mobile?

Even though there are a few alternatives for navigation on mobile, we’re going to lay out all the pros and cons of the hamburger menus and tab bars (bottom navigation) only. We hope it gives you evaluation criteria to find which one is right for your Magento PWA project.

Hamburger menu

The hamburger menus are often listed as #1 choice and become the go-to icon for traditional responsive eCommerce websites. The hamburger menu is the ‘3-bars’ icon on mobile that typically opens up into a side menu or navigation drawer.

However, from an app perspective, during a talk at the Worldwide Developers Conference in 2014, Mike Stern -- designer and Apple UX Evangelist -- was against using the hamburger menu for their apps, saying:

“Remember, the [two] key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go.”.

So, is the hamburger menu really effective and the best way to display your Magento PWA Studio project’s navigation? To answer this question, first, we need to dive into the effectiveness and usability of this UI element in mobile navigation. Continue reading

PWA Megamenu Installation Guide

Jul 28, 2021 Update: UB PWA Mega Menu v1.2.5 is fully compatible with Magento PWA Studio v.10.0.0. Please discard the installation step in this tutorial and follow the latest installation workflow in this guide.

In the previous article on Magento PWA Studio tutorial, we walked you through how to have a working copy of the Venia storefront installed and running on top of Magento 2 using @magento/create-pwa command. In this second article on setting up a Magento PWA project, we’ll give you step-by-step instructions for merging our UB Mega Menu storefront into your existing Magento PWA Studio project, so you can get started with your PWA project as quickly as possible.

Before you get started…

If you’re new to UB Mega Menu module and new to Magento PWA Studio in general, get yourself familiar with the following terms first. Continue reading

Magento PWA Studio tutorial

Aug 28, 2020 Note: You can follow this tutorial for the latest PWA Studio v.7.0.0.
Jun 2, 2020 Note: We have tested this tutorial with the latest PWA Studio 6.0.1 and everything worked fine.
Feb 12, 2020 Note: At the time of writing this tutorial, the Magento PWA Studio version was 5.0.0. We’ve just tested the tutorial with the latest PWA Studio v5.0.1 as well.

As you might know, Magento PWA Studio v5.0.0 officially introduced a new handy command -- @magento/create-pwa -- that allows for getting a new PWA Studio project up and running way easier. Actually, our team noticed that this command was in place before and we did try this command successfully with PWA Studio 4.0.0 for an experimental setup.

This tutorial will walk you through all steps to use this command to set up an initial project structure using the Venia storefront as a template. Continue reading

UB PWA Mega Menu


Jul 28, 2021 Update: UB PWA Mega Menu v1.2.5 is fully compatible with Magento PWA Studio v.10.0.0.
Jan 10, 2020 Update: UB Mega Menu v1.1.8 has just been released, packed with the newly added service layer for UB Mega Menu (MegaMenuGraphQL with GraphQL APIs ready for PWA Storefront).
Dec 31, 2019 Update: UB PWA Mega Menu has been enhanced with progressive skeleton loading pattern and newly added sticky menu.
Dec 20, 2019 Update: We’ve just updated UB PWA Mega Menu demo with incremental optimization and video content type demo.

For those who are curious about the things we are working on, here is a glimpse at our upcoming Magento PWA mega menu module called UB PWA Mega Menu.

For the past month or so, we have dived deep into early development of this module which is built on top of Magento PWA Studio. Although the module will undergo further development, we’re excited to share a quick preview of the features and demo to give you a general overview of the module.

Ready GraphQL based module

As you might know, GraphQL is defined as the main API to support PWA Studio functionality. You can check out this article to learn why GraphQL API could be an obvious choice against REST API in Magento 2 in the near future.

Our approach of UB PWA Mega Menu is to help build a flexible mega menu on top of Magento PWA Studio, so the module uses PWA Studio’s libraries -- GraphQL, React and many other technologies as part of its stack. Continue reading

Magento 2 Development bundle


Jun 25 Update: UB Trex Pro theme has just been updated with a new Furniture Homepage, fully compatible with Magento 2.3.5-p1. It’s also improved with Infinite Scrolling/Load More, Advanced Product Tabs

The creation of different Magento 2 stores is a time consuming and costly process. What if you could lay one strong Magento 2 bundle that can help get you started with any Magento 2 project faster and more stable development?

With UB Trex Pro, you have a new theme and pre-integrated extension package that can speed up the development on the Magento 2 platform. It contains one core theme, built-in extensions, and theme helper covering essential Magento 2 theme elements -- many of which are easily extendable.

Here are five of the key improvements of UB Trex Pro that you are sure to benefit the most from: Continue reading