Tabs

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

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

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

<Render file="icons" product="style-guide" params={{ component: "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

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

API instructions