Items in a Navi+ menu are arranged as a tree in the Menu items panel, right next to the step bar on the left of the screen. The tree shows one level at a time. An item that has sub-items shows a number badge with a › arrow on its right. Click it to open the sub-level, and click ‹ All items to go back. You can add new items, drag them to a new position, or nest one item inside another to build a multi-level menu.
Before you start
- You need a menu first. If you haven’t created one yet, see Create your first menu.
- Open that menu in the Navi+ app. The Build Menu step is already selected. The menu tree is in the Menu items panel on the left.
1. Add a new item
-
Click the ITEM button at the bottom of the menu tree to add a new item to the end of the level you’re viewing.
If you want to add an item right next to an existing one, hover over that row. A small bar appears above the row. Click Item below to add an item directly below, or Sub-item to add a sub-item inside that item. You can also press the
Tkey.Menu itemsHome/AutoItem below1Add item below↳ Sub-item2Add sub-itemShopcollections/all2AutoEditCopyPasteDelete
↑↓Move to…CollectionscollectionsAutoContactpages/contactAutoITEM -
The Add item window opens. In the left column, choose a template group such as Links & icons, then choose the display style and the content you want.
Add itemLive sections2Links & icons2Basics4Columns2Image + text3Social & support1Live sectionsProductsShopify menuLinks & iconsLinks & iconsIconsBasicsDividerGroup headingSticky lineTop headerColumnsMulti-columnTabsImage + textImagesBannerCardsSocial & supportSocialCancel -
In the Insert to row at the top of the window, check where the new item will go:
- Item below “item name”: places it at the same level, directly below the item you selected.
- Sub-item of “item name”: places it as a sub-item inside the selected item.
- End of the menu: appears when you add with the + ITEM button on an empty tree. The new item goes to the outermost level.
Add itemLive sections2Links & icons2Basics4Columns2Image + text3Social & support1Live sectionsProductsShopify menuLinks & iconsLinks & iconsIconsBasicsDividerGroup headingSticky lineTop headerColumnsMulti-columnTabsImage + textImagesBannerCardsSocial & supportSocialCancel -
Click the add button at the bottom right, for example ＋ Add 1. The new item appears in the menu tree right away. If you added a single blank item with no content yet, the Edit item panel opens automatically so you can fill in the details.
-
Click Save at the top of the screen. Once the menu is published, changes appear on your store right after you save.
If the menu tree is completely empty, click the + ITEM button in the panel to open the same Add item window.
The Sub-item option only appears when that item still has room for another level. If the selected item is already at the deepest level of the menu, you can only add a new item at the same level.
2. Reorder items and create sub-items
-
Hover over a row, press and hold the drag handle
⋮⋮on the right edge of the row, then drag up or down to change its order within the same level.Menu itemsHome/AutoShopcollections/all2AutoPress, hold, and dragCollectionscollectionsAutoContactpages/contactAutoITEM -
To view or arrange sub-items, click the › number badge on the right of the parent item to open its sub-level. To move an item inside another item, drag it and hold it over the parent for about half a second. The sub-level opens so you can drop it inside. To move an item out to the outer level, drag it onto ‹ All items or the parent’s name in the breadcrumb at the top of the tree.
Menu itemsAll items / ShopDrop here to move it out one levelNew arrivalscollections/newAutoSalecollections/saleAutoITEM -
If the list is long, or drag and drop is hard with your trackpad, hover over the row you want to move and click the ⋯ button. Then use the ↑ and ↓ buttons to change its order, or Move to… to pick a new parent item from the list.
Menu itemsHome/AutoItem below↳ Sub-itemShopcollections/all2AutoEditCopyPasteDelete
↑↓1Up and downMove to…2Move to another parentCollectionscollectionsAutoContactpages/contactAutoITEM
When you move a parent item, all of its sub-items move with it.
If you drag an item beyond the number of levels the menu allows, the app shows Max … levels allowed and keeps the item in its original position. See the level limits for each menu type in the table below.
3. Edit, copy, clone, and delete items
Hover over any item and click the ⋯ button on the small bar to open the action panel. You can click the buttons on screen, or press the shortcut key shown next to each one. Clicking the row itself also opens the Edit item panel.
| Button | Shortcut | What it does |
|---|---|---|
| Item below / Sub-item | T |
Opens the Add item window to add a new item |
| Edit | E |
Opens the panel to edit the item’s name, link, and icon |
| Copy | C |
Copies this item along with all the sub-items inside it |
| Paste | V |
Pastes the copied item directly below the selected item |
| Clone | D |
Creates an identical copy in place |
| Delete | Del or ⌫ on Mac |
Deletes this item and all the sub-items inside it |
You can also use Copy and Paste between two different menus. Copy an item in one menu, then open the other menu in the same tab or in another browser tab, and paste it there.
If you delete something or make a mistake, press Ctrl+Z on Windows or Cmd+Z on Mac to undo. To redo a step you just undid, press Ctrl+Y on Windows or Cmd+Shift+Z on Mac. Navi+ remembers the last 30 actions in the open session.
When you delete a parent item, all the sub-items inside it are deleted too. Undo history is lost when you reload the page, so undo right away if you delete something by mistake. If you already saved and reloaded the page, go to Back up and restore your menu to get an earlier version back.
How many levels can each menu type have?
A menu in Navi+ can have up to 3 levels. The levels you can actually use depend on the menu type you choose:
| Menu type | Max levels | How it works |
|---|---|---|
| Tab Bar | 3 | Level 1 is the tabs on the horizontal bar. Levels 2 and 3 are submenus that open when a tab is tapped |
| Mobile Menu | 3 | Supports all 3 levels of items, from outside in |
| Desktop Mega Menu | 3 | Multi-column menu: level 2 is split into columns, and level 3 items sit inside each column |
| Mobile Mega Menu | 3 | Level 1 is the category tab strip, and levels 2 and 3 hold the content inside |
| Floating Button | 2 | Level 1 is the floating buttons. Each button opens a list of sub-items at level 2 |
| Icon Menu | 1 | A single layer of icon tiles, with no sub-items |
The full-width Mobile Menu style, with a two-column layout across the whole screen, supports up to 2 levels only.
Some item types, such as banners, cards, and embedded Shopify menus, can’t hold sub-items. However, you can still place these items inside another parent item.
Troubleshooting
I can’t add a sub-item
This is usually caused by one of two things:
- The item you selected is already at the deepest level for that menu type (see the table above). Add a new item at the same level instead, or move the selected item out one level using Move to….
- The selected item is a type that can’t hold sub-items, such as a banner, card, or embedded Shopify menu. Select a different parent item to add the sub-item.
I deleted an item by mistake
Press Ctrl+Z on Windows or Cmd+Z on Mac to get it back right away. If you already saved or reloaded the page, restore it from the latest backup by following Back up and restore your menu. Cloud version backups need the Business plan or higher. Exporting the menu to a JSON file works on any plan.
I added an item, but it doesn’t show on my store
Check that you clicked Save at the top of the screen and that the menu is published. For more, see Menu changes not showing on your store.
Other platforms
The steps above are for Shopify — the default way.
The same as Shopify. There are no differences.
The same as Shopify. There are no differences.