Monday , March 4 2024
Home > Magezon News > Product Releases & Updates > IMPORTANT UPDATE: NINJA MENUS 2 RELEASE


Ninja Menus 2.0 released
Ninja Menus 2.0 released

Dear customers, 

We would like to announce a very important update related to Ninja Menus. Ninja Menus has been updated from version 1 to version 2. This update includes an extensive change in both UI and UX along with new functions to optimize menus builder and managing process. 

Let’s take a closer look at these changes 

1.New builder interface: Magezon Core Builder

2. Element list

3. Menu item

4. Single Image

5. Drill-down menu

6. Create multiple languages

7. 8 pre-designed menu templates

8. Animation effect

1. New Builder Interface: Magezon Core Builder 

The biggest change is a completely new builder interface built based on Magezon Core Builder (Magezon Core Builder is the one based on which we developed our builder extensions including Magezon Page Builder, Single Product Page Builder, and  Blue Form Builder)

Ninja Menus - Buttons
Ninja Menus – Buttons

From left to right, we have some buttons with their function like below: 

– (1)Magezon Logo drives you to the official Ninja Menus page.

– (2) Plus button lets add a new item into the menu. 

– (3)Import button helps easily create the normal type of menu with existing Category list.

– (4)Template button shows the list of 8 common pre-defined menus for you to choose. 

– (5)Coding button lets you copy or page lines of code to save time configuring. 

– (6)Setting button is useful for developers to customize the menu.

– (7) + (8) Undo and redo whenever you make a mistake. 

– (9)Responsive button (with 5 common devices listed) lets you choose the screen mode to configure individually. 

– (10)Widen button lets you see the builder in full screen and configure the menu in a bigger viewport. 

Then, the builder interface of Ninja Menus 2 now looks like this: 

Ninja Menus - New builder interface
Ninja Menus – New builder interface

2. Element List 

Ninja Menus version 1.0 got 7 elements as follow:

Ninja Menus - 7 elements
Ninja Menus – 7 elements

However, in Ninja Menus 2.0, we updated them and make the menu customization faster and easier with 11 elements supported.

Ninja Menus - Element list
Ninja Menus – Element list

Row, Text Block, Section, Heading, Separator, Empty Space, Tabs, Generate
Block, and Magento Widget are the basic elements that are described carefully in this guide.
Now, come to our specific new updates.

3. Menu item

In the previous version, we just support 3 types of link: Custom link, CMS page link, and Category link.

Ninja Menus 1.0 - Link types
Ninja Menus 1.0 – Link types

In this new one, we provide you another choice: Product link in order to widen the ability to custom your submenu.

Ninja 2.0 - 4 types
Ninja 2.0 – 4 types

Using this type lets you link the menu item to the desired products directly. As you can see below:

Ninja Menus - Product link
Ninja Menus – Product link

3.2 Label

Now it’s easier to set up some eye-catching labels on the menu items without the help of other extensions

Tons of colorful labels to grab your customers’ attention right from the start (Hot, On Sale, Special, New, Featured, etc) and 4 existing positions.

Ninja Menus - Label
Ninja Menus – Label

Not all, within the Style Tab, configure the Label’s color easily with the built-in palette

Ninja Menus - Label style
Ninja Menus – Label style

Create attracting labels like below at ease

Ninja Menus - Labels
Ninja Menus – Labels

3.3 Other Options

Ninja Menus - Other options
Ninja Menus – Other options

Hide below/ above the breakpoint

The previous version didn’t really get this function. We just had a section to decide the screen size (in pixel) in which the menu will switch to mobile display mode.

Ninja Menus - Mobile breakpoint
Ninja Menus – Mobile breakpoint
Hide on mobile

This version comes with buttons also lets you decide whether to display the menu in both modes (Mobile and Desktop)

Bag item disappeared

Add no-follow option to link

These on-off buttons let display the links that you want to show they are no-follow.

No follow option

Open New Tab

Previously, Ninja Menus got this function. However, you have to choose from a drop-down list like this

Open New Tab from a dop-down list

This 2.0 version, we just have a simple on-off button. It’s somehow simpler to use.

4. Single Image

The previous Image element has a simple interface and less function. It just lets you choose the image source, set the Alternative Text, Title Tag, Width and Height.

Ninja Menus - Image version 1
Ninja Menus – Image version 1

The Single Image element of version 2.0 comes with full option setting. Including 2 separate tabs in the pop up (General and Design Options) with the following Update

In the General Tab

Title in the General Tab
Enable Popup Effect in General Tab

Design Options tab

Design Options tab

5. Drill-down menu

While Ninja 1.0 supports 3 common menu types, Ninja 2.0 brings you another one named Drill-down menu.

Menu types of Ninja  Menus 1.0
Menu types of Ninja Menus 1.0
Menu types of Ninja Menus 2.0
Menu types of Ninja Menus 2.0

Plus, Ninja 2.0 lets you choose the menu type that will be displayed on the mobile mode (Below the breakpoint) from the list of 2. In Ninja Menus 1.0, everything will automatically turn to Accordion Menu on mobile devices.

 Accordion Menu on mobile devices

6. Create multiple store views and languages

Ninja Menus 2.0 updates the structure of the store view. While in the previous version, each store view gets its own builder interface, the new structure lets you edit all the store views at the same builder. All you need to do is just select a language from the list then edit the text. Click Save after finishing then everything done.

Quickly come through these following images to see the difference:

Create multiple store views and languages - English
Create multiple store views and languages - French

The text doesn’t change when you choose different languages cause it keeps the last editing result. However, after saving, you can see the difference in the storefront.

7. 8 pre-designed menu templates

When you get no idea about how to create a menu, it would be hard for you to have a quick start. However, Ninja Menus 2.0 supports 8 common menu templates that help set up a new one at a wink of an eye.

Even Ultimo or Porto menu can be added easily as they are listed on the templates.

8 pre-designed menu templates
List of menu templates

Also, preview the look of the menus just by clicking on them. The drop-down shows exactly how it looks on the storefront.

Preview the look of the menus

8. Animation effect

In this new update, you can choose the appearing animation for the element. The list of more than 80 Animation effects can help grab more attention. Not all, set the Duration and Delay for them to match your own web design.

In General Tab

Animation effect in General Tab

In Submenu Tab

Animation effect in Submenu Tab

We hope that the above updates of Ninja 2 can meet more of your expectations and bring you a better experience. Feel free to contact us if you have questions or need support.

About Hồng Hoàng

Hồng Hoàng

Check Also

smart code editor banner

Page Builder 3.0 Sneak Peek: Smart Code Editor

Hi everyone, in this sneak peek, we’re excited to reveal one of the brand-new features …

Leave a Reply