Layouts

A tab set shows in either a horizontal or vertical layout.

The layout can be always horizontal, always vertical, or automatic based on column width or screen width.

By defaut, the layout is automatic based on a screen width of 768 pixels.

You can change the layout from the Settings > General page in the app.

If you're using the tabs app block, you can change the layout from the block settings.

The layout settings panel from the Settings > General page in the app

Horizontal

In the Horizontal layout, the tab titles show side-by-side across the page. The content for the open tab is shown below all of the tab titles.

Tabs in the horizontal layout
Tabs in the horizontal layout
Tab titles wrap

Tab titles wrap to additional rows if there isn't enough room to show them in a single row.

Tab titles wrapping to additional rows when they can't fit in a single
              row
Tab titles wrapping to additional rows when they can't fit in a single row

Vertical

In the Vertical layout, the tab titles show on top of each other down the page. The content for each open tab is shown directly below its tab title.

Tabs in the vertical layout
Tabs in the vertical layout

The vertical layout has additional settings that adjust the way the tabs behave:

Open the first tab automatically
When checked, the the first tab in a tab set is open when the page loads. When unchecked, all tabs are closed when the page loads unless deep links are enabled and a tab is linked to.
Allow multiple tabs to be open at the same time
When checked, opening a new tab does not close other open tabs (other open tabs must each be closed manually). When unchecked, opening a new tab automatically closes other open tabs.

Automatic based on column width

When the layout is set to Automatic based on column width, the tabs show in the horizontal layout if the tab titles can all fit in a single row.

If the theme's content column isn't wide enough to show the tab titles in a single row then the tabs show in the vertical layout.

The column width is set by the theme

The tabs and tab content automatically expand to the full width of the content column the theme places them in.

If you want to give the tabs more space you can ask your theme developer to make the content column wider.

The layout changing to vertical when the tab titles can't fit in a single row
The layout changing to vertical when the tab titles can't fit in a single row
The layout can be different from product to product

It's possible that the layout will be different from one product to another, especially if some products have more tabs than others.

For example, Product A has three tabs. All three tab titles can fit in one row, so the tabs show in the horizontal layout.

Product B has seven tabs. All seven tab titles can not fit in one row, so instead of wrapping the titles to additional rows the tabs show in the vertical layout.

Automatic based on screen width

When the layout is set to Automatic based on screen width, the tabs show in the vertical layout on screens that are narrower than the Screen width setting, and in the horizontal layout on screens that are wider than the Screen width setting.

Match the screen width setting to your theme

We recommend you set the Screen width setting to match one of your theme's responsive breakpoint sizes.

If you're not sure which breakpoint sizes your theme uses you can ask your theme developer.

Still need help? Contact Us Contact Us