Aller au contenu
Starlight

Tabs

Ce contenu n’est pas encore disponible dans votre langue.

To create a tabbed interface useful to organize content by grouping similar information together, use the <Tabs> and <TabItem> components.

Preview
Sirius, Vega, Betelgeuse

Import

import { Tabs, TabItem } from '@astrojs/starlight/components';

Usage

Basic usage

Display a tabbed interface using the <Tabs> and <TabItem> components. Each <TabItem> must have a label to display to users.

src/content/docs/example.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';


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

Sync tabs

Keep multiple tab groups synchronized by adding the syncKey attribute.

All <Tabs> on a page with the same syncKey value will display the same active label. This allows your reader to choose once (e.g. their operating system or package manager), and see their choice reflected throughout the page.

To synchronize related tabs, add an identical syncKey property to each <Tabs> component and ensure that they all use the same <TabItem> labels:

src/content/docs/example.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';


_Some stars:_


<Tabs syncKey="constellations">
  <TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
  <TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
</Tabs>


_Some exoplanets:_


<Tabs syncKey="constellations">
  <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
  <TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>
Preview

Some stars:

Bellatrix, Rigel, Betelgeuse

Some exoplanets:

HD 34445 b, Gliese 179 b, Wasp-82 b

Add icons to tabs

Include an icon in a tab item using the icon attribute set to the name of one of Starlight’s built-in icons to display an icon next to the label.

src/content/docs/example.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';


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

Sirius, Vega, Betelgeuse

<Tabs> Props

Implementation: Tabs.astro

The <Tabs> component groups multiple <TabItem> components together and accepts the following props:

syncKey

type: string

A key used to keep multiple tab groups synchronized on a page. See the “sync tabs” guide for an example.

<TabItem> Props

Implementation: TabItem.astro

A set of tabs is composed of tab items, each with the following props:

label

required
type: string

A tab item must include a label attribute set to the text that will be displayed in the tab. See the “basic usage” guide for an example.

icon

type: string

Each tab item can include an icon attribute set to the name of one of Starlight’s built-in icons to display an icon next to the label. See the “Add icons to tabs” guide for an example.