Quick Start Guide: Tabs Component
Below are tips to help you build and customize your Tabs component.
Note: The Tabs component is structured using the Tab Builder table. Each row of this table represents a tab, and consists of a corresponding Tab ID, Tab Name, and Content.
Adding and deleting tabs
Use the floating table functions menu in the Tab Builder table to add or delete tabs by adding or deleting rows. This floating menu will appear at the top or bottom when you click anywhere inside the table column or row:
- Add a tab before an existing tab
To add a new tab before an existing tab, you will add a row above an existing row: - In the Tab Builder table, select the entire row that corresponds to the tab that you want to come after the new tab.
- Locate the floating table functions menu. Once the row has been selected, this menu should appear either at the top or bottom of the row.
- Select the icon that has the plus sign at the top left to add the new row.
- Add a tab after an existing tab
To add a new tab after an existing tab, you will add a row below an existing row: - In the Tab Builder table, select the entire row that corresponds to the tab that you want to come before the new tab.
- Locate the floating table functions menu. Once the row has been selected, this menu should appear either at the top or bottom of the row.
- Select the icon that has the plus sign at the bottom left to add the new row.
- Delete an existing tab
To delete an existing tab, you will delete an existing row: - In the Tab Builder table, select the entire row that corresponds to the tab that you want to delete.
- Locate the floating table functions menu. Once the row has been selected, this menu should appear either at the top or bottom of the row.
- Select the icon that has the minus sign at the bottom right to delete the row.



Adding content to a tab
Once a tab row has been added, fill in the following fields:
Field |
Description |
---|---|
Tab ID |
Choose a unique identifier name for the tab. |
Tab Name |
This is the text that appears at the top of the tab. |
Tab Contents |
This is the content that you want to present within the tab. |
A few helpful hints:
- You can undo by using the keyboard shortcut [PC: Ctrl + z] or [Mac: Cmd + z].
- If undo does not work, click the “Cancel” button to discard any unwanted or accidental changes.
- Pro Tip : If you want to paste text from other sources, use the keyboard shortcut [PC: Shift + Ctrl + v] or [Mac: Shift + Cmd + v] to paste without source formatting.
Copying, moving or deleting the Tabs component
The Tabs component can be copied, moved or deleted through the following steps:

- Scroll up to the “Information Card” section, near the top of the component.
- Select the component by clicking anywhere in the “Information Card” area. A light blue highlight will appear around the component.
- Use keyboard shortcuts to perform the desired operation:
Operation
PC
Mac
Cut
Ctrl +x
Cmd +x
Copy
Ctrl +c
Cmd +c
Delete
Delete
fn + Delete
Paste
Ctrl +v
Cmd + v