Layouts
A tab set shows in either ahorizontal or verticallayout.
The layout can be always horizontal, always vertical, or it can automatically switchbetween the two based oncolumn width orscreen width.
By defaut, the layout is automatic based on ascreen width of 768 pixels.
You can set the tabs layout on theSettings > General page in the app.
If you're using the tabs app block, you can set the tabslayout from theblock settings.
Horizontal
In the Horizontal layout, the tabtitles show side-by-side across the page. Thecontent for the open tab is shown below all of thetab 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 tabtitles show on top of each other down the page. Thecontent for each open tab is shown directly below itstab title.
The vertical layout has additional settings that adjust the way the tabs behave:
- Open the first tab automatically — When checked, the thefirst tab in a tab set is open when the pageloads. When unchecked, all tabs are closed when the page loads unlessdeep links are enabled and atab is linked to.
- Allow multiple tabs to be open at the same time — Whenchecked, opening a new tab does not close other open tabs (other open tabs need to beclosed manually). When unchecked, opening a new tab automatically closes other opentabs.
Automatic based on column width
When the layout is set toAutomatic based on column width, the tabs show in thehorizontallayout 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 rowthen the tabs show in theverticallayout.
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 toAutomatic based on screen width, the tabs show in thevertical layout on screens that are narrower than theScreen width setting, and in the horizontal layout on screensthat 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.