Skip to content
Cloudflare Docs
Docs DirectoryAPIsSDKs

Tabs

The Tabs component is used 1022 times on 596 pages.

See all examples of pages that use Tabs

Used 1022 times.

Pages

Partials

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

Additional guidance

The primary answer or core instruction should always appear in the main content flow, not exclusively inside a tab or collapsible section.

Use tabs for platform-specific variations (for example, Dashboard versus API versus Terraform) only after stating the general concept. Use Details for supplementary information, not for the primary answer.

Sirius, Vega, Betelgeuse

 
import { Tabs, TabItem } from "~/components";


<Tabs>
  <TabItem label="Stars" icon="star">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons" icon="moon">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>

Tab icons

Optionally, you can choose a corresponding icon from Starlight’s 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

Dash instructions

 
import { Tabs, TabItem } from "~/components";


<Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">


Dash instructions


</TabItem> <TabItem label="API">


API instructions


</TabItem> </Tabs>

Will synchronize with:

Dash instructions