Menu item types

When you click Add item to add an item to a menu, you choose the item type under Choose menu item type. The item type decides how the item looks on the web and which settings boxes it has.

Item types appear as a grid of small icons, without text. Hover over each icon to see a short description. The names of the item types in this article come from the Type row in the More section at the bottom of the Edit item panel.

Choose an item type

Menu item type

• Where and what for: at the Build Menu step, click + ITEM (or Item below / Sub-item on the bar that appears when you hover over an item) to open the Add item window. Choose a template there, and the template sets the item type. To see the Choose menu item type grid, click Classic view at the top of the window.
• Options: the types in this article (Icon + image + text, Big image + text, Group title, Blank space, Line, Tab, Image banner, Card, Custom HTML, Shopify menu, Menu reference, Sticky line…). In Classic view, Icon + image + text is selected by default.
• Applies to: all 6 menu types, but each menu type has its own set of item types. See the table Which item types are in which menu. Choosing a type isn’t locked by plan. The exception is Line: on the Starter plan, its two fields Type and Width are locked.
• What shoppers see: the item type decides how the item is drawn on the store (icon and text, big image, title, space, divider, tab, banner, card, HTML…) and which fields appear in the Edit item panel (see Which settings each item type has).
• Can’t change after creation: the Edit item panel has no place to change the type. To change it, add a new item of the right type and delete the old one.
• Other platforms: same as Shopify, except Shopify menu is only available on Shopify.

Basic item types

These five types are always available in every menu type. When you open the add item screen, Icon + image + text is selected by default.

Type	What it’s for	How to set it & notes
Icon + image + text	A regular menu item with an icon, a small image and a name. Shoppers tap it to open the link.	The default type. You can place the icon and text above–below or left–right, or show only the icon or only the text. See Display layout.
Big image + text	An item with a large image as a highlight, good for categories, collections or articles.	You can add a one-line description below it so shoppers understand the content, and crop the image to a ratio in the Image ratio field.
Group title	A text-only heading to group related items together.	Helps shoppers scan quickly. Doesn’t have the Display layout, Width layout, Align and Animation fields.
Blank space	A space with a fixed height to separate items.	Holds no content. Set the height in the Size (px) field, and add a background color or background image if you want.
Line	A horizontal line that separates items.	No text or icon. You can set the color, thickness, line style (solid, dashed or dotted), and the length: edge to edge or inset at both ends.

For Line, if you’re on the Starter plan, the two fields Type (line style) and Width (length) are locked.

Tab: create a content switcher strip

Tab creates a strip of tabs inside the menu. Add several Tab items side by side to group them. Shoppers tap each tab to switch between sections of content without leaving the menu. This type is available in every menu type. For step-by-step instructions, see Tabs, banners and cards.

Image banner: place a promotional image

Image banner is a plain banner image: only an image, with no text, no icon and no submenu. Shoppers tap the banner to open the link. This type is available in every menu type. For instructions, see Tabs, banners and cards.

Card: create a tile with a background and text

A Card is a tile with a background image or background color. At the bottom of the tile is a small icon or image with text. The whole card is one tap area that opens a link, and it can’t contain a submenu.

Set the card height in the Height (px) field, and choose where the text sits with Text position: Top, Middle or Bottom. The default is Bottom. This type is available in every menu type. For more details, see Tabs, banners and cards.

Text position

• Where and what for: in the Edit item panel of a Card item, just below the Height (px) field. It places the text block (the item name and small icon) at the top, middle or bottom of the card.
• Options: Top · Middle · Bottom. A new Card item is set to Bottom by default.
• Applies to: only the Card item type, in every menu type and every level. Every plan.
• What shoppers see: this field is only clearly visible when the card is taller than the text (you set a large Height (px)). Top and Bottom sit about 16px from the card edge, and Middle centers the text in the card. This field sets the vertical position. The horizontal position is set by the Align field of the item.
• Other platforms: same as Shopify.

New season TopNew season MiddleNew season Bottom

Custom HTML: embed your own code in the menu

Custom HTML lets you paste your own HTML code, such as a video, an embedded form, social media or a third-party widget. The block is as wide as the column that holds it. If you leave the Height (px) field empty, it grows and shrinks to fit the content. The block only loads when a shopper opens the menu, so it doesn’t slow down the web page. It can’t contain a submenu.

• Available in: Desktop Mega Menu, Mobile Mega Menu, Mobile Menu, Icon Menu.
• Not available in: Tab Bar and Floating Button, because each item in these two menus is a fixed icon button.

For how to use it, see Show products and custom HTML.

Shopify menu: use a menu you already have on Shopify

Shopify menu embeds one of your existing Shopify menus here, keeping all levels and their order. To make changes, edit it on Shopify as usual in Online Store → Navigation, then come back and click Sync. You don’t have to rebuild it by hand.

• Available in: Mobile Menu only, and only on Shopify.

For instructions, see Embed your Shopify menu.

Menu reference: embed a Desktop Mega Menu in a Mobile Menu

The item type labeled Menu reference lets you embed an existing Desktop Mega Menu inside a Mobile Menu. Items inside keep their levels and automatically take the Mobile Menu’s display style. You only choose the source mega menu once. After that, when you edit that mega menu, the Mobile Menu updates automatically.

• Available in: Mobile Menu only.

For more details, see Create a Mobile Menu.

Sticky line: pin items to the top or bottom of the menu

Sticky line is a dividing line for the pinned area of a Mobile Menu. The line itself doesn’t show outside the store. Every item above the Pin header line sticks to the top edge when a shopper scrolls. Every item below the Pin footer line sticks to the bottom edge.

In the settings panel, the This line marks field lets you choose whether the line is Pin header or Pin footer. If you turn on Auto-hide while scrolling, the pinned area slides out of view when the shopper scrolls down and comes back when they scroll up.

• Available in: Mobile Menu only, and only at the top level.
• Each menu can have at most one Pin header line and one Pin footer line. The header line must sit above the footer line.

This line marks

• Where and what for: in the Edit item panel of a Sticky line item, in the Sticky line box. It says whether this line divides the pinned area at the top or at the bottom of the menu.
• Options: Pin header · Pin footer. A new line is set to Pin header by default.
• Applies to: only Mobile Menu, only the Sticky line item type, only at the top level. Every plan.
• What shoppers see: with Pin header, every item above the line sticks to the top edge when the shopper scrolls. With Pin footer, every item below the line sticks to the bottom edge. The line itself doesn’t show.
• Other platforms: same as Shopify.

9:41•••

yourshop.com

STORE

STORE

SearchHomeShopCollectionsAbout usContactLog in

Auto-hide while scrolling

• Where and what for: right below the This line marks field, in the Sticky line box. A checkbox that lets the pinned area give way to content when the shopper scrolls.
• Options: checked turns it on, unchecked turns it off. Off by default.
• Applies to: the same as This line marks (Mobile Menu, Sticky line item, top level). Every plan. Each side (header, footer) reads the checkbox on its own line.
• What shoppers see: for the pinned header, when the shopper scrolls down the pinned area slides away, and it comes back right away when they scroll up. The pinned footer works the other way around (as described in the app).
• Other platforms: same as Shopify.

For how to place these, see Columns, dividers and pinned items.

Auto products

The item type labeled Auto products pulls products automatically and shows them according to rules you set, for example from a collection, new arrivals or best sellers.

You don’t choose this type from the item type grid. Instead, you add it from the template library in the Add item window. The settings panel for this item has only a field for the label name in the menu tree and the display rules. The styling is in the product settings. For details, see Show products and custom HTML.

Top header: add a header section with logo and search

Top header is a ready-made block at the top of the menu, with a logo, a search box and shortcut keys. Add this block from the template library: open the Layout group and choose the Top header item. Don’t pick it by hand in the item type grid.

This type is available in Mobile Menu and Desktop Mega Menu. For details on each setting, see Top header block.

Campaign spot: reserve a place for a campaign

Campaign spot is a preset position in the menu for showing campaign tools such as a countdown timer. If you leave it empty with nothing assigned, nothing shows on the store.

To use it, add a Campaign spot template in the Add item window, save the menu, then click Edit on that item to assign a campaign tool. This type is available in every menu type. For more, see Campaign.

Which item types are in which menu

Item type	Tab Bar	Floating Button	Mobile Menu	Desktop Mega Menu	Mobile Mega Menu	Icon Menu
Icon + image + text	✓	✓	✓	✓	✓	✓
Big image + text	✓	✓	✓	✓	✓	✓
Group title	✓	✓	✓	✓	✓	✓
Blank space	✓	✓	✓	✓	✓	✓
Line	✓	✓	✓	✓	✓	✓
Tab	✓	✓	✓	✓	✓	✓
Image banner	✓	✓	✓	✓	✓	✓
Card	✓	✓	✓	✓	✓	✓
Custom HTML			✓	✓	✓	✓
Shopify menu			✓
Menu reference			✓
Sticky line			✓
Top header			✓	✓
Campaign spot	✓	✓	✓	✓	✓	✓
Auto products	✓	✓	✓	✓	✓	✓

Which settings each item type has

This table shows which settings boxes each item type has when you open the Edit item panel. For details on each field, open Item layout settings, Item appearance settings and Animation, class, CSS and attributes.

Item type	Display layout	Width layout	Height / Size	Align	Animation	Class names	CSS	Attributes	Submenu
Icon + image + text	✓	✓		✓	✓	✓	✓	✓	✓
Big image + text	✓	✓		✓	✓	✓	✓	✓	✓
Group title						✓	✓		✓
Blank space		✓	✓
Tab	✓
Image banner		✓			✓	✓	✓
Card	✓	✓	✓	✓	✓	✓	✓	✓
Custom HTML		✓	✓		✓	✓	✓	✓

Line only has the divider settings. The other types, such as Shopify menu, Menu reference, Sticky line, Campaign spot and Auto products, have almost no shared styling fields. They only have their own settings. Only items that hold submenu items show the Submenu field.

Other platforms

Shopify Wix Other website

The steps above are for Shopify — the default way.