Layouts
A tab set shows in either a horizontal or vertical layout.
The layout can be always horizontal, always vertical, or it can automatically switch between the two based on column width or screen width.
By defaut, the layout is automatic based on a screen width of 768 pixels.
You can set the tabs layout on the Settings > General page in the app.
If you're using the tabs app block, you can set the tabs layout from the block settings.
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.
Tab titles wrap
Tab titles wrap to additional rows if there isn't enough room to show them 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.
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 need to 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 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.