ninja menus extension for magento 2 › media › catalog › ... · 5. add new item a, add new...
TRANSCRIPT
![Page 1: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/1.jpg)
Ninja Menus
0
Ninja Menus
extension for Magento 2
User Guide
Version 1.0
![Page 2: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/2.jpg)
Ninja Menus
1
Table of Contents
I) Introduction ................................................................................................................ 3
II) Menu Grid ................................................................................................................. 4
III, Add new menu ......................................................................................................... 8
1. General setting ........................................................................................................... 9
2. Advanced settings ................................................................................................... 12
IV, Menu builder .......................................................................................................... 13
1. Add Item ................................................................................................................... 15
2. Edit item ................................................................................................................... 16
a, General tab ........................................................................................................... 17
b, Icon tab ................................................................................................................ 25
c, Sub Menu tab ....................................................................................................... 28
d, Design Options tab ............................................................................................... 37
3. Delete item ............................................................................................................... 42
4. Change item's position ............................................................................................ 43
5. Add new item ........................................................................................................... 46
a, Add new item ........................................................................................................ 46
b, Add new sub item................................................................................................. 47
V, Our 7 elements ........................................................................................................ 50
1. Anchor ...................................................................................................................... 51
2. Container .................................................................................................................. 54
3. Image ....................................................................................................................... 57
4. Html .......................................................................................................................... 60
5. Heading .................................................................................................................... 62
6. Clear columns .......................................................................................................... 63
7. Divider ..................................................................................................................... 66
VI, How to ................................................................................................................... 68
1. Configure menu item for Multiple Store view ........................................................... 68
2. Setup Multi Columns ................................................................................................ 71
![Page 3: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/3.jpg)
Ninja Menus
2
3. Import Store Categories ........................................................................................... 74
4. Replace Magento default top navigation menu ....................................................... 77
VII, Contact Information ............................................................................................... 80
![Page 4: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/4.jpg)
Ninja Menus
3
I) Introduction
This document is the User Guide for Magento 2 Ninja Menus. It describes the extension
functionality and provides some tips for a quick start.
Magento 2 Ninja Menus is an EASY-TO-USE and extremely CREATIVE extension. No
need to be professional in coding and technical skills, you can still make your own
navigation menu just by using our simple and intuitive drag & drop interface.
● Drag & Drop Magento 2 Menu Builder
● Support horizontal, vertical, accordion navigation menu
● Support 7 elements: anchor, container, HTML, image, heading, divider, clear
columns
● 100% Fully Responsive
● Support multiple stores
● Support multiple languages
● Create unlimited level
● Customize the style of the menu item: background color, font size,...
![Page 5: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/5.jpg)
Ninja Menus
4
II) Menu Grid
Once the extension has been installed, the section Menus will appear in the Content
menu. To go to admin grid of Ninja menus extension, navigate to Content > Menus or
Menus > Manage Menus and you will see something like this:
![Page 6: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/6.jpg)
Ninja Menus
5
You can apply the following actions:
Filter: filter menus using different criteria to find your wanted ones.
Columns: click here and a drop-down list will appear. Tick the columns you want to
appear in the table. In the below image, you can see and tick columns such as ID,
Name, Identifier, Type, Status, etc.
![Page 7: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/7.jpg)
Ninja Menus
6
Per page: Number of menus displayed per page.
![Page 8: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/8.jpg)
Ninja Menus
7
Move to the following table
- The 1st column: there are some boxes for you to tick so you can select or unselect
your desired menu. The drop-down box above let you select all the menus existing.
- The 2nd and 3rd columns: The ID number and names given for each menu when you
created.
- The 4th and 5th columns: Type and Status
- The 6th and 7th column: Time created and modified
- The last one - the most important one: Let you edit and manage the existing menus.
![Page 9: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/9.jpg)
Ninja Menus
8
III, Add new menu
Navigate to Menus > Add New Menu or directly click on orange Add New Menu button
The display will be like:
- Back button helps you come back your previous step
- Save button helps you save every change you made. Be noticeable to use this button
right and usually in order not to loose any important change.
- Click on arrow button to show what's on Advanced Settings
![Page 10: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/10.jpg)
Ninja Menus
9
1. General setting
A drop-down list will appear after clicking on Add New Menu button:
Enabled: Slide the button to Yes to enable Menu on your website and it will be
displayed in your storefront.
Menu Name (required): Enter the menu name to manage your menu list easily.
Identifier (required): Enter a set of numbers, letters, or symbols that is used to represent
a piece of data or a process in a computer program
Type: Choose the type you want from the drop-down list.
We'll show you how your menu look in each type here below
![Page 11: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/11.jpg)
Ninja Menus
10
- Horizontal menu. Take a closer look here
- Vertical menu and more detailed here
![Page 12: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/12.jpg)
Ninja Menus
11
- Accordion, or you can look closer
![Page 13: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/13.jpg)
Ninja Menus
12
2. Advanced settings
Enable Sticky Menu: Slide the button to Yes and your menu will stick to the top on
storefront when scrolling down. Like this
CSS Classes: For advanced only (coder, programmer..)
Mobile Breakpoint(px): The size of screen (in pixel) in which your menu will
automatically switch to mobile display mode
![Page 14: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/14.jpg)
Ninja Menus
13
IV, Menu builder
To come in Edit mode (Menu builder), choose the menu and click Edit
Overview
Please pay more attention cause this is the most important part of this guide
Generally, we've already created 3 demo menu in 3 different types: Vertical, Horizontal
and Accordion for you to get an overview. As they get the same function setting, i will
only demonstrate the function of Horizontal type.
After adding, your menu will be listed. In the table, click on Edit button, you can go
directly to the builder mode.
![Page 15: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/15.jpg)
Ninja Menus
14
Builder tab is right below General tab, click on drop-down button so you can see
something as the image below:
- Blue Add Item button let you add new items to you menu.
- Red Delete All give you right to delete all the items existing.
- Green Import Store Categories helps easily create normal type of menu with existing
Category list
![Page 16: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/16.jpg)
Ninja Menus
15
1. Add Item
Blue Add Item button let you add new items to you menu.
After saving, this is how it look it storefront:
![Page 17: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/17.jpg)
Ninja Menus
16
2. Edit item
Once you created new item, you can edit easily, using this button
Click on the pencil symbol and you will see a pop up like this:
![Page 18: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/18.jpg)
Ninja Menus
17
a, General tab
Title and Subtitle: Enter/edit/delete the name of your category.
In this case we change it to “Women” and “Clothes"
And see how it works:
![Page 19: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/19.jpg)
Ninja Menus
18
Type: Choose the type of your category including:
- Custom Link: If you choose this type, enter your link in the below box
In this case we make it our link:
So the result when you click on Magezon1 will be:
![Page 20: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/20.jpg)
Ninja Menus
19
- Category Link
When you choose Category Link Type, the Category will have a dropbox like this. This
case, we chose Women category for example:
![Page 21: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/21.jpg)
Ninja Menus
20
And here is the result when clicking on the item Magezon1
![Page 22: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/22.jpg)
Ninja Menus
21
- CMS Page Link
Do the same with the last Type: CMS Page Link and choose a Page in the drop-down
box. 404 Not Found is chosen in this case
And the result:
![Page 23: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/23.jpg)
Ninja Menus
22
- Caret: A dropbox show off when you click on the Insert icon button let
you choose an additional symbol to appear next to the category title.
Glass Icon is chosen as Caret for Magento1 in this case
- Caret on hover: You can only see this kind of symbol when you hover
your mouse to the category on the storefront.
Heart Icon is chosen as Caret on Hover in this case
Note: If you remember the code/name of the icon, you can absolutely search icon by
typing in search box.
![Page 24: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/24.jpg)
Ninja Menus
23
Let’s see the result in storefront:
- Target: Four ways to open linked document:
+ In a new window/tab
+ In the same window/tab
+ In the parent frame
+ In the full body of the window
![Page 25: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/25.jpg)
Ninja Menus
24
- Hide on mobile: Switch the button to decide whether your element is shown in
frontend on mobile devices or not.
Try turning it on and check it by your mobile:
![Page 26: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/26.jpg)
Ninja Menus
25
- Class Attribute: For coders/programars or those who have coding skill only.
=> After making all the needed changes in this tab, don’t forget to click Save button
before doing anything else.
b, Icon tab
There's a slide Show icon button -> Switch it to Yes. And you can see a list like this
![Page 27: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/27.jpg)
Ninja Menus
26
- Add new Icon for your category by clicking on plus button to choose image from your
device or paste your Image Url in the given box.
This case an Image Url are entered.
- Manage the Icon position by choosing Left or Right in the dropdown
box.
This case we choose left.
- Add Icon on Hover just by the same way you add the new one.
This case Image Urls are entered
![Page 28: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/28.jpg)
Ninja Menus
27
Let's see:
![Page 29: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/29.jpg)
Ninja Menus
28
c, Sub Menu tab
- Type:
Mega Submenu and Stack menu (No position option cause the former submenu
arranged on top of the follower). When you choose the Mega Submenu Type, the
display will be like
![Page 30: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/30.jpg)
Ninja Menus
29
Position: Select the place you want to display your sub menu and it's children in the
dropdown list.
If we choose Center, your submenu will display right under the parent and make a
straight column with its parent.
And here is its display in storefront:
What about Left edge of menu bar?
![Page 31: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/31.jpg)
Ninja Menus
30
And how it look in Right Edge of menu bar
Let's try Left Edge of parent item
![Page 32: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/32.jpg)
Ninja Menus
31
Or Right…
When you choose Left Edge - Vertical - Full Height, it will display like this
![Page 33: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/33.jpg)
Ninja Menus
32
And the last one:
But if you choose Stack menu instead and keep the Width the same. The stack menu
help you show off the children of an item without hovering your mouse on it.
![Page 34: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/34.jpg)
Ninja Menus
33
The result will be like:
![Page 35: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/35.jpg)
Ninja Menus
34
- Width: Enter the number you want in the box
- Background Image: Insert by clicking on plus button or pasting UrL
- Background Color: Click to choose from the palette or enter color code or enter the
exact code of the color.
- Background Position: Enter position (left or right)
- Background Style: Choose your style in the dropdown list
- Inline CSS: For coder and programer only for advanced setting.
![Page 36: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/36.jpg)
Ninja Menus
35
We’ve made an example setting for Category Digital in the backend
![Page 37: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/37.jpg)
Ninja Menus
36
And here is the result:
![Page 38: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/38.jpg)
Ninja Menus
37
d, Design Options tab
Design Options tab will look like this
Let go through an example to see how they work:
- Color setting
Set your color in 3 conditions: Select appropriate color for each section: Font,
Background, Border by choosing from palette or enter exact color code
Normal
![Page 39: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/39.jpg)
Ninja Menus
38
When you Hover
And when Active
![Page 40: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/40.jpg)
Ninja Menus
39
- Border and Padding
![Page 41: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/41.jpg)
Ninja Menus
40
- Edit your menu text by adjusting Alignment, Border Style, Font size (in pixel), Inline
CSS
![Page 42: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/42.jpg)
Ninja Menus
41
Let's give an example on Electronics category:
![Page 43: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/43.jpg)
Ninja Menus
42
3. Delete item
Navigate you pointing mouse to the category you want to delete and click the red
recycle bin symbol.
As you see, it's gone
![Page 44: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/44.jpg)
Ninja Menus
43
4. Change item's position
You can change the position by 2 ways:
- Drag and drop: the easiest and quickest way. Which this action, you can move an
item to anywhere you want
Ex: We are changing Electronics category to the place of Custom in figure 4.1
Fig 4.1
How it look the storefront (4.2)
Fig 4.2
![Page 45: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/45.jpg)
Ninja Menus
44
Or even the item in menu (4.3)
Fig 4.3
And how it look (4.4)
Fig 4.4
![Page 46: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/46.jpg)
Ninja Menus
45
- Using arrow symbol:
Switch your item's position to the left or right (4.5)
Fig 4.5
And the result in frontend (4.6 & 4.7)
Fig 4.6
Fig 4.7
![Page 47: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/47.jpg)
Ninja Menus
46
5. Add new item
a, Add new item
To add a new Item in your menu, click on Add item button (as described above:
A new item appears with default name (Item 1,2,3..) like this:
Then, click on the item to see symbols, click on the pencil symbol to see a pop-up
where you can edit your new item. How to use the option inside the pop-up is described
in detail in section 2 - Edit item.
![Page 48: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/48.jpg)
Ninja Menus
47
b, Add new sub item
To add new sub item, Choose a parent first (This case it is About us), then click on plus
symbol\Anchor
A new sub item appears with its default name
Click on the area to see all options, then click on pencil symbol to Edit your new sub
item. Edit the sub item in just the same way of new one.
This case we do some setting as shown in following figures
![Page 49: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/49.jpg)
Ninja Menus
48
General tab
![Page 50: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/50.jpg)
Ninja Menus
49
Icon Tab
And here is the result:
![Page 51: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/51.jpg)
Ninja Menus
50
V, Our 7 elements
Last but not least, we'll show you how to use plus symbol. After clicking you can see
this
![Page 52: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/52.jpg)
Ninja Menus
51
1. Anchor
Anchor element let you make a new sub menu (children of the category you just click
on). As shown above, the default title of the new categories are Item 1,2,3… but you can
absolutely change and adjusting by clicking on pencil symbol.
Unsurprisingly, this feature let you create multi-level sub menu. Let's go through step by
step
- Sub menu History: Click on plus button\Anchor
- General tab:
![Page 53: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/53.jpg)
Ninja Menus
52
- Icon tab:
- Submenu tab:
We’ve made 3 levels for About us. They are: History, Our team and Our vision using
this element and edit by pencil symbol (as described above)
![Page 54: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/54.jpg)
Ninja Menus
53
How it look in the backend
Let see how amazing it will be in storefront
![Page 55: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/55.jpg)
Ninja Menus
54
2. Container
Unlike Achor, when you add a Container, it means you add a no-title box to your menu.
Just a blank space, no title editing. You can only edit style (width, background color,
style, position…) in Submenu tab and Class Attribute (For those who have coding
knowledge) in General tab
Remember: Adding container means you add another background for your menu. To
see how it display, add more items inside it.
![Page 56: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/56.jpg)
Ninja Menus
55
Here is an example using this type of element
In the edit mode, tab Submenu, we choose:
Then, add Item 1,2 to the container
![Page 57: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/57.jpg)
Ninja Menus
56
→ And the result:
![Page 58: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/58.jpg)
Ninja Menus
57
3. Image
Click on the Image element to create a new space → Click on that space and choose pencil
symbol → a pop up appear
- Click on Upload File to choose existing images from your device or enter/paste Url for
this
- Alternative Text: Enter the text you want to display when your site can't load the
image
- Enter the Title Tag
- Adjust the size you want by enter the Width and Height box (pixel)
![Page 59: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/59.jpg)
Ninja Menus
58
Let’s try with this setting:
=> Don’t forget to save when you finish
![Page 60: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/60.jpg)
Ninja Menus
59
And the result…
![Page 61: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/61.jpg)
Ninja Menus
60
4. Html
Click on Html element, you can see
Edit your content here with WYSIWYG Editor (You see what you get) button. Try
“Money ain't everything"
![Page 62: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/62.jpg)
Ninja Menus
61
You can see it in frontend
![Page 63: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/63.jpg)
Ninja Menus
62
5. Heading
Make your parent categories easier on the eyes by Heading element with full Design
options for you to edit.
Click on the pencil symbol of heading, you can see this
- Adjust Title, choose Type on General tab
- Design your Heading on Design Options tab (Full options). We make this setting as an
example
![Page 64: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/64.jpg)
Ninja Menus
63
6. Clear columns
This element help separate items in the same row but still keep their own width
To add a new clear column, click there
![Page 65: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/65.jpg)
Ninja Menus
64
Click on the edit symbol the new column, there will be a pop-up like this
Decide whether you want your column to display in the frontend or not by switching
Hide on Mobile slide button.
Class Attribute: For coder only
You can change the position of the new column by clicking on the arrow button, move it
up or down. This case we create a clear column to separate item Socks and ties with
the image
![Page 66: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/66.jpg)
Ninja Menus
65
And here is the result
![Page 67: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/67.jpg)
Ninja Menus
66
7. Divider
When adding divider, you can add a title with a cross line that separate other items
Like this
and edit it
![Page 68: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/68.jpg)
Ninja Menus
67
And the result will be like
![Page 69: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/69.jpg)
Ninja Menus
68
VI, How to
1. Configure menu item for Multiple Store view
To configure the menu items, click on the caret of All stores view, and choose 1 store
view you want to edit.
We choose English store first.
![Page 70: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/70.jpg)
Ninja Menus
69
In English view, it will no longer have 3 buttons: Add Item, Delete All & Import Store
Categories
It means you just can edit the text of your items
Now it's time to do it
![Page 71: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/71.jpg)
Ninja Menus
70
In the storefront, choose English for your view mode by clicking on this
Then see your result
Do the same with other languages.
France, for example
![Page 72: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/72.jpg)
Ninja Menus
71
2. Setup Multi Columns
For example, you want to setup multi columns for this category.
We will show you how to group this 10 items into 5 columns
Firstly, you should understand the rule of our items is auto-filling. You got a container
with 100% in width and so are the items. If you want them to be set in 5 columns, just
create 5 container, and turn the item's proportion to 1/5 of 100% (20%).
Create 5 container
![Page 73: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/73.jpg)
Ninja Menus
72
Create 2 items for each
Then change the width to 20%
![Page 74: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/74.jpg)
Ninja Menus
73
What you see in backend:
And the result in storefront:
![Page 75: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/75.jpg)
Ninja Menus
74
3. Import Store Categories
As clicking on that green button, a pop-up appears:
![Page 76: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/76.jpg)
Ninja Menus
75
- Category box displays list of categories for you to choose. Some categories have
children like this
As soon as you select one category and click Import -> It will be automatically added to
your menu, including all its children
Like this
![Page 77: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/77.jpg)
Ninja Menus
76
Result in storefront
- Import Childrens is a slide button. When you turn it to Yes, all the children of the
category chosen (if it has children) will be added as separate categories in the right side
of the parent.
On the storefront
![Page 78: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/78.jpg)
Ninja Menus
77
4. Replace Magento default top navigation menu
First, you have to create your own new menu with your store's categories. We make this as
an example:
In the General Setting part, make sure you turned the Enable Menu to Yes and named
your menu first. This case we make it “Top-menu”.
Then, in the Identifier field, enter exactly the word “top-menu" and let our code do the
rest.
![Page 79: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/79.jpg)
Ninja Menus
78
Now, see the result if you do it in a right way
![Page 80: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/80.jpg)
Ninja Menus
79
Note: If you enter wrong code in the Identifier field, your menu will not be displayed in the
storefront.
Like this:
And the result will be like:
![Page 81: Ninja Menus extension for Magento 2 › media › catalog › ... · 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above:](https://reader033.vdocuments.us/reader033/viewer/2022052723/5f0ed7327e708231d4413209/html5/thumbnails/81.jpg)
Ninja Menus
80
VII, Contact Information
If you have any questions or need any support, feel free to contact us via following
ways. We will get back to you within 24 hours since you submit your support request.
- Fill out Contact Us form and submit to us.
- Email us at [email protected].
- Submit a ticket.
- Contact us through Skype: [email protected].
- Contact us on live chat: [email protected].