Skip to content
Cloudflare Docs

Tabs

The Tabs component is used 804 times on 486 pages.

See all examples of pages that use Tabs

Used 804 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

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