# How to add tabs to your website

> Tabs let you organise content into clearly labelled sections, keeping your pages tidy and easy to navigate.

Source: https://www.kualo.com/knowledgebase/prosite-pages/how-to-add-tabs-to-your-website
Updated: 2026-06-09

---

Tabs let you organise content into clearly labelled sections, keeping your pages tidy and easy to navigate. Rather than asking visitors to scroll through a long page, tabs let them jump straight to what they need.

## Adding the tabs element

1. Drag the **Tabs** element from the **Advanced** menu onto your page.

![Dragging the Tabs element onto the page](https://kb-cdn.kualo.com/bc/e7/bce744b75cfb899769d9ea702365c6021299d6e7.mp4)

2. Adjust the default width and margin, or leave the element to size itself automatically. Placing the tabs block inside an existing Layout often gives you more control over positioning.

![Adjusting width and margin on the Tabs element](https://kb-cdn.kualo.com/0c/ca/0cca11d3c768bb75772a2479633e9179d80e2d14.gif)

3. In the configuration panel on the right, set the background colour for the tab items. Adjust the **Default**, **Hover**, and **Active** states separately to control how each tab looks in each situation.

![Tab colour configuration panel](https://kb-cdn.kualo.com/b6/52/b652b8c7e130ac1069e11fcc2ad4d4352bd51d98.png)

4. Each tab panel appears as a separate entry in your **Page Structure** tree. Select a panel there to edit its contents - you can add any content you like inside a tab, including additional layouts and blocks.

![Tab panels shown in the Page Structure tree](https://kb-cdn.kualo.com/4e/dc/4edcc44c624416dde54b359b27dbb34b1cf3e1c1.png)

5. Each tab panel can be configured in the same way as a Layout. You also have the extra option of setting a **title** and **icon** for the tab.

![Tab panel title and icon settings](https://kb-cdn.kualo.com/19/af/19af47c1877f6967f9829e732bbd484d0b9f4651.png)

6. To add more tabs, click **New Item** in the configuration panel. This inserts a blank tab panel that you can then populate and style.

![New Item button for adding a tab](https://kb-cdn.kualo.com/98/19/98192905bbc425f048ea0eeaf04b8d236c66aec9.png)

## Finished result

Once you have styled your tabs and nested content inside each panel, the result is a clean, polished tabbed section that keeps your page organised.

![Example of a completed tabs block](https://kb-cdn.kualo.com/6a/ba/6aba5e46bc5050f3e97528578a8df015644232b0.mp4)


---

_Source: Kualo Knowledgebase — https://www.kualo.com/knowledgebase/prosite-pages/how-to-add-tabs-to-your-website · © Kualo Ltd._