Tabbed menu
Let shoppers switch between groups of content, such as Men, Women and Kids, inside one submenu.
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
-
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. -
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.
-
Fill each tab
Select a tab and click Add block to add link lists, images, products and more. See Blocks.
-
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?
Thanks for your feedback! Tell us what was missing
Report an issue