> For the complete documentation index, see [llms.txt](https://supportcenter.creatorlink.net/creatorlink-support-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://supportcenter.creatorlink.net/creatorlink-support-center/create-a-site/editing-blocks/tab-block.md).

# Tab Block

Add a Tab Block to **organize content by topic within separate tabs.** Use the Tab Block to present information in a clean and efficient way.

<figure><img src="/files/OCBLZRcLgyPEwbxWMYRJ" alt=""><figcaption></figcaption></figure>

<mark style="color:$info;">**\[Tab Settings-Tab button]**</mark>&#x20;

<figure><img src="/files/0BFE05PPdWnCXVjblDwb" alt=""><figcaption></figcaption></figure>

1-1. **Tab Buttons**: You can edit the tab button items and design.

1\. **Items**: Click Edit Items to rename or delete buttons and set the default tab to display first (click Open Tab right beside the item name).

&#x32;**. Font**: Set the font style for the buttons.

3\. **Color Mode**: Click the settings button on the right to change the color mode for the font, divider lines, and button background.

{% hint style="info" %}
Tip: Default color mode settings vary depending on the Tab Block type.
{% endhint %}

4\. **Layout**: Choose whether the tab buttons are displayed in a single row or multiple rows.

5\. **Change Style**: Click the refresh button (🔁) change the Tab Block style.

6\. **Horizontal Count:** Set how many tab buttons appear in one row. (If you set 4 or more, the number will be fixed at 4 on tablet and mobile.)

7\. **Full Length:** Adjust the total horizontal width of the tab button area.

{% hint style="info" %}
Tip: If you reduce the full width, you can align the tab buttons to the left, center, or right.
{% endhint %}

8\. Adjust the **horizontal spacing between buttons, the button height, and the spacing between the tab buttons and the content area.**

9\. **Border Radius**: Adjust the roundness of the tab button corners.

**\[Tab Settings-Navigation]**

<figure><img src="/files/bVe8m7Ew4XQC298mvv9W" alt=""><figcaption></figcaption></figure>

1-2. **Navigation**: You can add and edit navigation buttons for the Tab Block.

{% hint style="info" %}
Tip: To use navigation, the number of items must be greater than the number of tab buttons shown per row.
{% endhint %}

1\. **Navigation Style**: Click the dropdown (▼) button on the right to switch to the navigation style you want.

2\. **Color:** Set the navigation color.

3\. **When Clicked**: Click the dropdown (▼) button on the right to choose how the navigation moves when clicked.