If your submenu is too long, or you want a promotional image such as “New collection” right in the menu, you can group items into tabs and add banners or cards.
Before you start
- Open your menu in the Navi+ app, and go to the Build Menu step.
- The tabs in this guide are buttons that switch between groups of items inside the menu. They’re different from a Tab Bar, which is the fixed navigation bar at the bottom of a phone screen.
- Banners and cards can’t open a submenu. If you need a submenu, use a regular menu item.
Group items into tabs
Each tab is a switch button for a group of items inside the menu. When shoppers tap a tab, the list of items below it changes right away, without reloading the page.
-
Where you want the tab, click Add item. The Tabs group under Basics appears only when you add to a submenu, a column of a Desktop Mega Menu, or an Icon Menu.
Menu itemsHome/AutoShopcollections/all2AutoCollectionscollectionsAutoContactpages/contactAutoITEM1Click Add item -
Choose the Tabs group.
Add itemLive sections2Links & icons2Basics4Columns2Image + text3Social & support1Live sectionsProductsShopify menuLinks & iconsLinks & iconsIconsBasicsDividerGroup headingSticky lineTop headerColumnsMulti-columnTabs2Choose TabsImage + textImagesBannerCardsSocial & supportSocialCancel -
Choose a tab style: Underline, Outline, Segmented, or Top line. Click ＋ Add tab to add a tab, then name each one, such as
Men,Women, orOn sale. In each tab, tick the links to include in the Pick links for… box, then click Add. -
In the menu tree, each tab shows as its own row with a › number badge that tells you how many items the tab holds. Click that badge to open and edit the items in the tab. To add items to a tab, open it, then click + ITEM.
Menu itemsTab: Men24Each tab has its own group of itemsTab: Women25Tab: On sale16ITEM -
If you want items that always show below the tabs and don’t belong to any tab, such as a “Contact” item, add an End of tab group item after the last tab. Then click Save.
The tab-marker row in the menu tree only groups items. On your store, shoppers see just the row of tab names and the list of items below.
Change the style and color of a tab group
To change the look of the whole tab group, open Edit item on the first tab in the group. Any change here applies to all the other tabs.
| Setting | Meaning |
|---|---|
| Tab style | The style of the tab buttons: Underline, Outline, Segmented, or Top line. |
| Display | How the tabs line up in the row. Hug spreads the tabs evenly across the full width. Spread out pushes icons and text to the two edges. Left, Center, and Right keep each tab as wide as its text, and group them to one side. |
| Tab color | The color of the selected tab. If you leave it empty, tabs use the text color of that menu level. |
You can add an icon or a custom image to each tab, following the steps in Icons, images, and badges for menu items. When shoppers open the menu, the first tab is always open by default. Create 3 to 6 tabs, so the tab row fits well on a phone screen.
You can use tabs in the submenus of Tab Bar, Floating Button, Mobile Menu, Mobile Mega Menu, Desktop Mega Menu, and Icon Menu. In a Mega Menu, tabs are handy for splitting large categories into panels with several columns. You can also nest a second tab group inside a tab, but keep the structure simple so shoppers don't get overwhelmed.
Add a promotional banner
A banner is a large image block that introduces a new collection or a promotion. When shoppers click the banner, they go straight to the link you added.
-
Click Add item, find the Cards & banners group, then choose the Banner group.
Add itemLive sections2Links & icons2Basics4Columns2Image + text3Social & support1Live sectionsProductsShopify menuLinks & iconsLinks & iconsIconsBasicsDividerGroup headingSticky lineTop headerColumnsMulti-columnTabsImage + textImagesBanner1Choose BannerCardsSocial & supportSocialCancel -
Upload an image, type the text, and add the destination link. In the Layout field, choose the width of the banner: Full row to take the whole row, Half row for half of the row, or One third for a third of it.
-
Click Add, then click Save.
STOREHomeShopCollectionsAboutContactTopsT-shirtsJacketsPantsJeansChinosNew collection banner3Banner in the right column
If you only want a plain image with no text, choose the Image banner template in the Style & content step when you add the item. This type only shows the image. It adds a field to adjust the frame’s aspect ratio, and it has no title, description, or sub-items. Because you can’t change the item type in the Edit item panel after it’s created, choose the right type from the start.
Add a card with text over an image or color background
A card is a content box with an image or colored background, with the title and description sitting on top. Shoppers can click anywhere on the card to open the link.
-
Click Add item, go to the Cards & banners group, then choose the Card group.
Add itemLive sections2Links & icons2Basics4Columns2Image + text3Social & support1Live sectionsProductsShopify menuLinks & iconsLinks & iconsIconsBasicsDividerGroup headingSticky lineTop headerColumnsMulti-columnTabsImage + textImagesBannerCards1Choose CardsSocial & supportSocialCancel -
Choose a background image or a background color for the card. Type the title in the Text field, the description in the Sub text field, and add the destination link.
-
Enter the height you want in the Height (px) field. If you don’t change it, the default height is
200. -
Choose where the text sits vertically on the card: Top pushes the text toward the top edge, Middle centers it, and Bottom places it at the bottom edge, which is the default.
‹ BackEdit itemORUpload small image (as icon)jpg, png, svg, webp…Basic infoTextLanguage Autumn collectionLink to Auto-clean URLLanguage collections/allAdd dividerAdd badgeSub text (optional)Language E.g. Free shipping over $50LayoutDisplay layoutAUTOICON + TEXTTEXT ▸IMAGETEXT ONLYWidth layoutAutomaticText position Top Middle Bottom4Vertical alignmentStyleFollows the menu's styleCustomizeVisibilityShowing under all conditionsEdit rulesSubmenuAdvanced -
Click Save.
Card items don’t support dividers or badges.
Tips for a good-looking banner and card layout
- Place a banner at the end of a submenu, or in its own column in a Desktop Mega Menu. Choose Full row so the banner stretches across the whole area.
- To line up several cards side by side, choose Half row for two cards or One third for three cards, placed next to each other.
- When cards sit side by side, use the same Height (px) for all of them, so they’re equal in height.
- Choose an image at least 800 px wide, a few hundred KB in size, so it looks sharp and still loads light. See recommended image sizes for more.
- Pick an image with an even light or dark area where the text sits, then choose a suitable vertical alignment, so the text stands out and isn’t lost in the image’s details.
Frequently asked questions
Why doesn’t the style I set on the second tab show on my store?
Navi+ takes the style, alignment, and color settings from the first tab and applies them to the whole group. Open Edit item on the first tab in the group to make changes.
Why can’t I add sub-items below a banner or card?
Banners and cards are image blocks linked directly to a destination, so they can’t hold sub-items. If you need a list of sub-items, create it with a regular menu item, and place the banner or card beside it.
Why are the items at the end of the menu merged into the last tab?
Every item under a tab counts as part of that tab. To separate shared items from the tab group, click Add item and insert an End of tab group item directly below the last tab. Items below this line always show independently, outside the tabs.
Other platforms
The steps above are for Shopify — the default way.
Tabs, banners, and cards work the same as on Shopify. A banner or card link points to a page on your Wix site instead of a Shopify collection.
Tabs, banners, and cards work the same as on Shopify. A banner or card link points to a page on your website instead of a Shopify collection.