Skip to content
Install app
English

Tabbed menu

Let shoppers switch between groups of content, such as Men, Women and Kids, inside one submenu.

How-to guide Pro Navigation 2 min read

A tabbed menu shows tab titles such as Sneakers, Apparel and Accessories next to the content of the selected tab. It fits a large catalog into a compact panel.

Add a tabbed menu

  1. Pick a template

    In the editor’s Elements tree, click Add submenu under a top-level item. Point to Tabs and click Select on a template.

    The tab templates. Scroll for all nine: three depths on the left, top or right.
  2. Rename the tabs

    Each tab title is an item: hover over it, click Edit Item and change its Title. Click Add tabs in the Elements tree to add another tab.

  3. Fill each tab

    Select a tab and click Add block to add link lists, images, products and more. See Blocks.

  4. Save and publish

    Click Save, then Publish.

Templates

Simple
One row of tabs, each with its own content: Simple left tabs, Simple top tab, Simple right tabs.
2-level
Each tab contains its own set of tabs: Nested left 2-level tabs, Nested top tabs 2 level, Nested right tabs 2 level. For example Sneakers > Running / Training / Lifestyle > products.
3-level
Tabs inside tabs inside tabs: Nested left 3-level tabs, Nested top tabs 3 level, Nested right tabs 3 level.

Tabs block settings

Hover over the tabs block and click the pencil icon.

Width
How much of the panel the tabs block uses: Auto or 8.33% to 100%.
Position
Where the tab titles show: Left, Top or Right.

A tabbed menu opens in a mega menu panel, so the parent item’s Submenu section sets its width, alignment and background. See Mega menu panel layout.

Tips

  • Left tabs suit long category lists; Top tabs suit 3 to 6 short titles.
  • Keep tab titles short so they don’t wrap onto two lines.
  • To put tabs next to other blocks, click Add block in a mega menu and choose Tab.

Was this helpful?

Report an issue