# Tab List

{% hint style="info" %}
By default the `tab list` block includes a `tab` block with a `heading` block inside.
{% endhint %}

## Basics

The `tab list` block allows you to regroup several `tab` blocks in one place. 

<figure><img src="https://lh3.googleusercontent.com/cfU3MQeXrkzgoVViGFzlOWDBERdh1xo2DV31ZC0ib6FZk6st4NnCVuFQYdi1Nr_l5NJicpAuzUeoavoCaKTSECQM5VvPWsDZO6p0NrK1gYORYbOS5PpIb_H4kQtw4UkCS9Nx4nqhaq3EeoJGBdgvCn_DDn5RtKLFIF-gxk_xkH8qOFgOO_drvdSy1rkGeg" alt=""><figcaption></figcaption></figure>

## Add a Tab List

You can add a `tab list` block inside an existing block or outside any other block on the page.

<figure><img src="https://lh6.googleusercontent.com/TPJeAUKkD3zyk908sP8pvNqFrnMxvIcoDUTlhNnZsUK6KgTNzSpMrQrx9vQrNsrFzeV0uGClguY9fLfZIIU8RNTvfY0soFqJK7IXKFWruZrBz3n9ih8qeeP8K1BKFarYVjJcLzeJsSOVver3oRXAMYTFvS0SRG5lPm9pJnnkBhbmJbSTv4x8uidc7NuHGw" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh3.googleusercontent.com/C0ytBKBLR1JOEII9-YEAdFAuNKw9skkDGWvj7RlHbBLdUnRKfE0mVTGpYqqd90V4XyCnpKOvrdy_dgB2ucM9GvAY_ih4dxaF-jDIfTXb_QcB0V5WLXyOTO1IQvkMovljVUAO8kHMfyO_1r0AksSuebQBjxGeWtcQdCP8sSRlBDtOHE06l1Vk_OvjKvK3yw" alt=""><figcaption></figcaption></figure>

<details>

<summary>Add</summary>

If you want to add a tab list outside any other block on the page:

1. Click on the ➕ ​​icon to open the Inserter Panel
2. Search for the Cwicly tab list block
3. Click on the Cwicly tab list block to insert it into your page

If you want to add a list inside a parent block:

1. Open the Quick Insert panel in the parent block
2. Search for the Cwicly tab list block
3. Click on the Cwicly tab list block to insert it into your parent block

</details>

{% embed url="<https://www.youtube.com/watch?v=-SbWB9PMGBs>" %}
Getting Started - Tab Block
{% endembed %}

## Settings

Allows you to set specific settings for the `tab list` block.

<figure><img src="https://lh6.googleusercontent.com/XRZwcxtLwE2okL3z1QA_PJVpHu28C4iq6_MaGhhkem0i5yjL2VBBBXuN_VSPZ68tcD2ecK9hoy6RDElS0TzpC46tbN8qSl8G422_0lNN7ZglGEa49FSO1efVBt0wER_NYzK-5J-4N0HxytsxjByimpgLXacMOPuynQ9_IBWERpae_uxPnIABO_BamDv3bw" alt=""><figcaption></figcaption></figure>

### Tab Contents ID

The Tab Contents ID property enables you to link the the `tab list` and `tab contents` block together.

This gives you total freedom as to where you place your tab list and tab contents.

Copy the ID of the `tab content` block you wish to link to your `tab list` block.

![](https://lh5.googleusercontent.com/ytUrWxmV24xdlP_Xls3Z1dcrxjoY2-5vyiac56DZ9wHlAY4lsGcmmDPOfjhvMcH6sRwUHaJQlr1pyMRKIdt8me7jjJsF8l-dI6UDf9t-fR-8TomSzlZf7I3KtKKqE6w3YIKkzG7v0sqIXeSkiX1qjDVlRGE_XB1mmMwx2C1kH7geAVhtx96nNUFZvQYt4g)

<details>

<summary>Modify</summary>

1. Select a `list tab` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the settings tab&#x20;
5. Find the Tab Contents ID property
6. Enter the Tab Contents ID

</details>

<details>

<summary>Reset</summary>

1. Select a `list tab` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the settings tab
5. Find the Tab Contents ID property
6. Click dot to reset

</details>

### Active Tab

The Active Tab property allows you to select the which tab is open when the user first loads the page.

![](https://lh3.googleusercontent.com/zVbVPk48Zzwc6UKWNIY7TkDc18jS7cAxd_2TAOMdWgetJUlW-vxNUHP1TOAApv5kNQxUFjkNQQq2nUTE3QZr3Ysh_bK8ddOPNw1NKlAuClS8NGLo5HpsVUXO96ec5MwlyWMH3fQBo5jJ3ioqOdVdLd1OMT9sA9zijSyiXzP95AO-JiPGs9wuWuIjZrIczQ)

<details>

<summary>Select</summary>

1. Select a `list tab` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the settings tab&#x20;
5. Find the Active Tab property
6. Select the desired number from the Dropdown menu

</details>

<details>

<summary>Reset</summary>

1. Select a `list tab` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the settings tab
5. Find the Active Tab property
6. Click dot to reset

</details>

### Show All (Backend)

The Show All (backend) property opens all the tab contents at the same time, which allows you to see  your different tabs and contents on the backend for editing purposes.

![](https://lh4.googleusercontent.com/WyZ6hTeJa3f9WBJ__n6P1IYm1jfmWi-H27FGeMvPD6WCckYIaryhFUY55UvIEQEbgIfm8P-yu2mbfQA6ANN8ZEuKjGoDTZECYqwkJNolQekkaKcxtbb5l5dha-jWbVuGSBD8u9HQelzmN2JNrNn-FFmYB2Z07GWK1Sk2er7_ZMldtaSXiBVce7yCDtDAOQ)

<details>

<summary>Activate/Deactivate</summary>

1. Select a `list tab` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the settings tab&#x20;
5. Find the Show All (backend) property
6. Toggle the property in order to activate/deactivate

</details>

## Tab

Tabs are a navigation element that allow users to easily access different areas of a site or different parts of an individual page.

{% content-ref url="tab-list/tab" %}
[tab](https://docs.cwicly.com/blocks/tab-list/tab)
{% endcontent-ref %}