Help Center

Menu

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:

  1. Add a component to your page by clicking the widgets Add component button or by adding a content block (by clicking the add_circle button) then clicking the add component button.

  2. Locate the tabs Squiz core component within the component browser and then click the Select button.

    tabs component select

  3. This will add the tabs component to your page.

Configure the tabs component

tabs fields

  1. Enter the tab’s title.

  2. Enter the tab’s contents. This will display when the tab is selected.

  3. Click the add button to add additional tabs. Each tab is configured using a dedicated card as shown above.

  4. Clicking the delete (trash) icon will delete the selected tab.

    clicking the delete button removes the tab immediately. It does not ask for confirmation.

Display configuration

tabs display fields

  1. When enabled, this option displays a button if there are too many tabs to display in the available space.

  2. Controls the tab placement above the tab content panel.

  3. This can be used to select the default tab to make active when the page loads.

Basic examples

This image shows three tabs components in a page, demonstrating various display options.

tabs examples

You can apply your own CSS styling.