Tabs
Use the tabs component when you wish to format a set of options in tabs on a page.
| The tabs component does not allow you to nest other components within the tab content. |
Add the component to your page
When you are editing your page using page-builder:
-
Add a component to your page by clicking the Add component button or by adding a content block (by clicking the button) then clicking the add component button.
-
Locate the tabs Squiz core component within the component browser and then click the select button.
-
This will add the tabs component to your page.
Configure the tabs component
Tab content configuration
-
Title: Enter the title for your tab.
-
Content: Enter the contents that will be displayed when this tab is selected.
-
Add: Click the add button to add additional tabs. Each tab is configured using a dedicated card as shown above.
-
: Clicking the delete (trash) icon will delete the selected tab.
Be careful to not accidentally click the delete button as it will remove the tab without confirmation.
Display configuration
-
Show overflow button: When enabled, this option will display a button if there are too many tabs to display in the available space.
-
Alignment: Controls where the tab placement above the tab content panel.
-
Default open tab: This can be used to select the default tab to make active when the page loads.
