---
title: Tab Links
slug: tab-links
docTags: 
createdAt: 2024-05-16T08:30:37.490Z
---

# Overview

Tab Links allow the creation of several Cards with Images and navigation links inside the block referring to the existing articles or external URLs.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/AcW3TGIFGVjSNc-NJE9pF_image.png" size="44" width="319" height="50" position="center" caption="Tab Links - Page structure" alt="Tab Links - Page structure" showCaption="true"}

## Sample Tab Links block

![Tab Links block - Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/cGePMBkxZlRC1PaTORzut_tab-links.gif "Tab Links block - Preview")

## General

Here you can define the style of the visible Tab links.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/TAiVMrvMhClD_1map9dDD_image.png" size="44" width="352" height="356" position="center" caption="Tab Links block - General settings" alt="Tab Links block - General settings" showCaption="true"}

### Background color

Click the rectangular button to pick your background color.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/3CxV8na8Pcjpp-S0KNJvB_image.png" size="44" width="344" height="85" position="center" caption="Tab Links block - Background color settings" alt="Tab Links block - Background color settings" showCaption="true"}

### Link style

Here you can define the look of the Tab Links, you can either make it a** Link** or a **Button**

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/WYL8Jd1oiTzzSNVi0qSUE_image.png" size="44" width="351" height="175" position="center" caption="Tab Links block - Link style settings" alt="Tab Links block - Link style settings" showCaption="true"}

### Mobile dropdown dialog text

This is the text that will be displayed on mobile.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/vRGs2M9McjyTNWGmdYM_J_image.png" size="44" width="348" height="78" position="center" caption="Tab Links block - Mobile dropdown settings" alt="Tab Links block - Mobile dropdown settings" showCaption="true"}

## Items

Tab links are added using Cards. Click on **+Add** to add more tabs.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/16hxU5XN1rnjux-My7aJ-_tab-links-settings.jpg" size="54" width="314" height="561" position="center" caption="Tab Links block - Item settings" alt="Tab Links block - Item settings" showCaption="true"}

### Links

Fill out the **Tab Title** and add an **Internal link** or **url**

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/HbiPpgrki5RclcuDB6mlx_image.png" size="44" width="319" height="327" position="center" caption="Tab Links block - Tab settings" alt="Tab Links block - Tab settings" showCaption="true"}