Tab sets#

Tab sets enable you to to render parallel documentation fragments where only one pane is visible at a time. Tab sets are useful for multi-lingual code samples — like how this documentation shows how to write documentation in either reStructuredText or Markdown.

Tab sets on a page can be synchronized. For example, if a user selects reStructuredText for one tab set, all other tab sets automatically switch to that same preference.

Tab sets are provided through the Sphinx Design extension.

Create a tab set#

.. tab-set::

   .. tab-item:: reStructuredText

      .. code-block:: rst

         `Rubin Observatory <https://www.lsst.org>`__

   .. tab-item:: markdown

      .. code-block:: md

         [Rubin Observatory](https://www.lsst.org)

::::{tab-set}

:::{tab-item} reStructuredText
```rst
`Rubin Observatory <https://www.lsst.org>`__
```
:::

:::{tab-item} markdown
```md
[Rubin Observatory](https://www.lsst.org)
```
:::

::::

Synchronized tab sets#

To synchronize multiple tab sets, add a sync option to each tab-item with consistent keys.

.. tab-set::

   .. tab-item:: reStructuredText
      :sync: rst

      .. code-block:: rst

         `Rubin Observatory <https://www.lsst.org>`__

   .. tab-item:: markdown
      :sync: md

      .. code-block:: md

         [Rubin Observatory](https://www.lsst.org)

::::{tab-set}

:::{tab-item} reStructuredText
:sync: rst
```rst
`Rubin Observatory <https://www.lsst.org>`__
```
:::

:::{tab-item} markdown
:sync: md
```md
[Rubin Observatory](https://www.lsst.org)
```
:::

::::

Automatic tab items for code samples#

If the tab items contain only code, you can use the tab-set-code directive instead of tab-set. In that case, each code-block, code or literalinclude in the tab-set-code is treated as a tab item, that’s automatically labeled and synchronized by language.

.. tab-set-code::

   .. code-block:: rst

      `Rubin Observatory <https://www.lsst.org>`__

   .. code-block:: md

      [Rubin Observatory](https://www.lsst.org)

::::{tab-set-code}

```rst
`Rubin Observatory <https://www.lsst.org>`__
```

```md
[Rubin Observatory](https://www.lsst.org)
```

::::