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

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

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

Dashboard

Dash instructions

API

API 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:

Dashboard

Dash instructions

API

API instructions