Skip to content
Cloudflare Docs

Tabs

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

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>

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