---
title: Tabs · Cloudflare Style Guide
description: "This component can help you create a tabbed interface to show
  related information more efficiently. Use it when there are different ways of
  getting the same thing done:"
lastUpdated: 2025-08-22T14:24:45.000Z
chatbotDeprioritize: true
source_url:
  html: https://developers.cloudflare.com/style-guide/components/tabs/
  md: https://developers.cloudflare.com/style-guide/components/tabs/index.md
---

This component can help you create a tabbed interface to show related information more efficiently. Use it when there are different ways of getting the same thing done:

* Dashboard / API / Terraform
* Different code syntax styles
* Account-level vs zone-level navigation
* GRE / IPsec tunnels

### Tab icons

Optionally, you can choose a corresponding icon from Starlight’s [Icons](https://starlight.astro.build/reference/icons/#all-icons) for tab labels.

## Synchronize Tabs

If you have tabs that follow a particular pattern (Dashboard / API / Terraform), add a `syncKey` parameter that includes a `string` value.

We use the following `syncKey` values in our docs:

* `dashPlusAPI`: Dashboard / API / Terraform
* `workersExamples`: For different code language tabs in the Workers docs (JavaScript, TypeScript, Python, Rust)

### Example

Will synchronize with:

* Dashboard

  Dash instructions

* API

  API instructions
