Skip to content

Content tabs

Content tabs group related content, letting readers switch between alternatives without scrolling.

Syntax

Use === to define tabs:

=== "Tab 1"
    Content for tab 1. Must be indented.

=== "Tab 2"
    Content for tab 2. Must be indented.

Example: Installation methods

=== "pip"
    ``` bash
    pip install mypackage
    ```

=== "conda"
    ``` bash
    conda install mypackage
    ```

=== "Docker"
    ``` bash
    docker pull mypackage:latest
    ```

pip install mypackage

conda install mypackage

docker pull mypackage:latest

Example: Operating systems

=== "Linux"
    ``` bash
    docsforge serve
    ```

=== "macOS"
    ``` bash
    docsforge serve
    ```

=== "Windows"
    ``` powershell
    docsforge serve
    ```

docsforge serve

docsforge serve

docsforge serve

Example: Programming languages

=== "Python"
    ``` python
    def greet(name):
        return f"Hello, {name}!"
    ```

=== "JavaScript"
    ``` javascript
    function greet(name) {
        return `Hello, ${name}!`;
    }
    ```

=== "Rust"
    ``` rust
    fn greet(name: &str) -> String {
        format!("Hello, {}!", name)
    }
    ```

def greet(name):
    return f"Hello, {name}!"

function greet(name) {
    return `Hello, ${name}!`;
}

fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

Nested tabs

Tabs can contain any Markdown, including other tabs:

=== "Setup"
    === "Linux"
        ``` bash
        sudo apt install python3
        ```

    === "Windows"
        ``` powershell
        winget install Python.Python.3.11
        ```

=== "Configuration"
    Edit `docsforge.yml` to customize your site.

Tab labels with icons

Use icons in tab labels:

=== ":material-linux: Linux"
    Linux-specific content.

=== ":material-apple: macOS"
    macOS-specific content.

=== ":material-microsoft-windows: Windows"
    Windows-specific content.

Configuration

Content tabs require the pymdownx.tabbed extension:

markdown_extensions:
  - pymdownx.tabbed:
      alternate_style: true

The alternate_style option provides the modern tabbed interface.

Next steps