Tabs

This page describes how to add tabs to a document.

tip

For details about what tabs are and how they work, see Tabs in Docusaurus.

When to add tabs

You should add tabs when you need to guide users across different:

• Databases
• Environments
• Products
• Programming languages
• Tools

Add tabs

In the Markdown file, add the following React component below the title:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Then, go to the line where you want to add tabbed content and paste the following template.

<Tabs groupId="<ADD_GROUP_ID>" queryString>
  <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>" default>
    <ENTER_TEXT_IN_MARKDOWN>
  </TabItem>
  <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>">
    <ENTER_TEXT_IN_MARKDOWN>
  </TabItem>
</Tabs>

Then, do the following:

• For groupId, replace <ADD_GROUP_ID> with the name of the group for that set of tabs.
  • This text should all be lowercase.
  • If there is more than one word, use chain case / kebab case. (nosql-databases)
• For value, replace <ADD_TAB_NAME> with a unique name for that tab.
  • This text should all be lowercase.
  • If there is more than one word, use chain case / kebab case. (For example: cosmos-db and other-nosql-databases)
• For label, replace <ADD_TAB_NAME> with a unique name for that tab.
  • Use sentence-style capitalization. For example: Cosmos DB and Other NoSQL databases.
  • Try to keep the tab labels short.
• Replace <ENTER_TEXT_IN_MARKDOWN> with the content for that tab. Make sure the content is indented within <TabItem ...> and </TabItem>.
• To add more tabs within a tab, add another <TabItem ...>TEXT</TabItem> component.

tip

If you have other tabs with the same tab labels (for example, other sets of tabs with the labels MySQL, DynamoDB, etc.), make sure that you use the same name for groupId across all sets of tabs. By using the same name for groupID, users can change all tabs that match the tab label on a page with one click.

Reference: Tabs in Docusaurus

caution

• Don't include Markdown headings within tabs. Headings will appear in the table of contents on the right-hand side of the page but won't be navigable.
  • Instead, use HTML heading tags, like <h3>HEADING</h3>. HTML heading tags will still display as headings but not appear in the table of contents.
  • For details about Docusaurus not supporting hiding headings in tabs, see Table of Contents don't work using Tabs.
• If you include an admonition in a tab, don't indent the admonition. If the admonition is indented, an error will occur and the site won't build.

Add tabs within tabs

In some rare cases, you might want to add tabs within tabs to a page. To do so, you can use the following template. To add more tabs within a tab, add another <TabItem ...>TEXT</TabItem> component.

<Tabs groupId="<ADD_GROUP_ID>" queryString>
  <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>">
    <ENTER_DESCRIPTION_ABOUT_THIS_TAB_IN_MARKDOWN>
    <Tabs groupId="<ADD_GROUP_ID_WITH_UNIQUE_MODIFIER>" queryString>
      <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>" default>
        <ENTER_TEXT_IN_MARKDOWN>
      </TabItem>
      <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>">
        <ENTER_TEXT_IN_MARKDOWN>
      </TabItem>
    </Tabs>
  </TabItem>
  <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>">
    <ENTER_DESCRIPTION_ABOUT_THIS_TAB_IN_MARKDOWN>
    <Tabs groupId="<ADD_GROUP_ID_WITH_UNIQUE_MODIFIER>" queryString>
      <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>">
        <ENTER_TEXT_IN_MARKDOWN>
      </TabItem>
      <TabItem value="<ADD_TAB_NAME>" label="<ADD_TAB_NAME>">
        <ENTER_TEXT_IN_MARKDOWN>
      </TabItem>
    </Tabs>
  </TabItem>
</Tabs>