Tabs

<cv-tabgroup> <cv-tab>

The Tabs component lets you define mutually exclusive content sections that users can toggle between — perfect for organizing platform-specific, step-based, or categorized documentation.

When multiple tab groups (<cv-tabgroup/>) share the same group-id attribute, they stay synchronized automatically across the entire page.

• Single-Click Behavior — Click once to switch tabs locally within that specific tab group only. The change is visual only and is not saved.
• Double-Click Behavior — Double-click to synchronize the tab selection across all tab groups with the same id on the page. The state is saved to browser storage and persists across page reloads.
• Example: If you have two tab groups both with id="fruit", a single-click on "Orange" in the first group only changes that group locally. Double-clicking on "Orange" will sync both groups to show "Orange" and save the state.

No-ID Tabs

Each tabgroup element should have a parent id attribute, while each tab element should have their own tab id as well.

However, if a tabgroup element does not have an id attribute, the tabgroup and children tabs will function as normal tabs. If the children tabs do not have id or header attributes, their headers will be enumerated.

For example:

<cv-tabgroup>
<cv-tab>

Tab 1 Content
</cv-tab>
<cv-tab>

Tab 2 Content
</cv-tab>
</cv-tabgroup>

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Multi-ID Tabs

You can create a single tab that represents multiple alternative IDs by specifying multiple IDs separated by spaces or |

• This will create one tab in the navigation bar that activates when any of the specified IDs is selected.
• The tab header displays the label of the first ID in the list (or the header attribute if provided).
• The content inside the tab is shared for all IDs listed.
• Use case: When multiple options (e.g., python java) present the same content, show a single tab instead of duplicates that might confuse readers into thinking the content differs.

Example:

<cv-tabgroup group-id="lang" >
  <cv-tab tab-id="python" header="Python">

Python is a high-level, interpreted programming language known for its simplicity and readability.

  </cv-tab>
  <cv-tab tab-id="java" header="Java">

Java is a statically-typed, compiled language known for its robustness and platform independence.

  </cv-tab>
  <cv-tab tab-id="javascript" header="JavaScript">

JavaScript is a dynamic language primarily used for web development.

  </cv-tab>
</cv-tabgroup>

<cv-tabgroup group-id="lang" >
  <cv-tab tab-id="python java" header="Python/Java Installation">

Both Python and Java are easy to install. Download from their official websites.

  </cv-tab>
  <cv-tab tab-id="javascript" header="JS Installation">

Install JavaScript by downloading Node.js from nodejs.org.

  </cv-tab>
</cv-tabgroup>

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Behavior: In the second tab group, you'll see a single "Installation" tab in the navigation bar that becomes active when either Python or Java is selected in the first group. This avoids showing duplicate tabs with identical content.

Setting the Default Tab

By default, the first tab in a group is selected when the page loads (unless the user has previously selected a different tab, in which case their selection is restored).

You can override this default behavior and specify which tab should be initially selected using the custardui.config.json, by adding a default property to the tabGroup.

Default Tab Example Configuration: To make the "orange" tab selected by default for the "fruit" group:

{
  "config": {
    "tabGroups": [
      {
        "groupId": "fruit",
        "default": "orange",
        "tabs": [...]
      }
    ]
  }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Header Syntax with Rich Formatting

In addition to the standard header attribute, you can use an alternative syntax with <cv-tab-header> and <cv-tab-body> elements to enable rich HTML formatting in your tab headers.

This is useful when you need:

• Bold, italic, or colored text in headers
• Icons or badges alongside the header text
• Complex nested elements with custom styling
• Multi-line or specially formatted headers

Key Points:

• <cv-tab-header> is the recommended way to define headers. It takes precedence over the header attribute.
• Icon Support:
  • Inside <cv-tab-header>: Supports both MarkBind shortcodes (e.g., :fa-user:) and raw HTML. MarkBind processes the content automatically.
  • Inside header="..." attribute: Supports raw HTML only (e.g., header='<i class="fa-solid fa-user"></i> Title' to display an icon, and bold is header='<strong>Important</strong>'). MarkBind shortcodes will not work in attributes.
• HTML Support: Both methods support general HTML.
• If <cv-tab-header> exists but is empty, the tab ID is used as the fallback header label.

Syntax & Rules

Structure:

<cv-tab tab-id="tab-id">
  <cv-tab-header>Header content (supports HTML)</cv-tab-header>
  <cv-tab-body>Tab body content (both can be used together)</cv-tab-body>
  Tab body content (both can be used together)
</cv-tab>

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Attributes & Options

<cv-tabgroup> Attributes

<cv-tab> Attributes

<cv-tab-header> Attributes

No required attributes, just a container for the tab header content.

<cv-tab-body> Attributes

No required attributes, just a container for the tab body content.

Configuration

Tab groups work out of the box with no setup — just use the <cv-tabgroup> and <cv-tab> elements.
By default, the first tab is shown.

For more control (such as settings integration or default selections), configure them in your custardui.config.json.

{
  "config": {
    "tabGroups": [
      {
        "groupId": "fruit",
        "label": "Fruit Selection",
        "isLocal": false,
        "default": "apple",
        "tabs": [
          { "tabId": "apple", "label": "Apple" },
          { "tabId": "orange", "label": "Orange" },
          { "tabId": "pear", "label": "Pear" }
        ]
      },
      {
        "groupId": "localTabGroup",
        "label": "Page specific tabgroup",
        "isLocal": true,
        "default": "c",
        "tabs": [
          { "tabId": "a", "label": "Alpha" },
          { "tabId": "b", "label": "Beta" },
          { "tabId": "c", "label": "Charlie" }
        ]
      }
    ]
  }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

JSON Configuration Option Types

TabGroupConfig

The TabGroupConfig object is for defining tabgroups in JSON configuration.

TabConfig

The TabConfig object is for defining tabs in JSON configuration.

Binding to Placeholders

You can bind a tab group to a placeholder variable. Selecting a tab will automatically set the variable's value.

Example:

{
  "groupId": "code-switch",
  "placeholderId": "lang",
  "tabs": [
    { "tabId": "java", "label": "Java", "placeholderValue": "java" },
    { "tabId": "python", "label": "Python", "placeholderValue": "python" }
  ]
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Global vs. Local Tab Groups

By default, all tab groups defined in your configuration are global—they will appear in the settings on every page of your site.

You can mark a tab group as local to make it appear in the settings only on pages where that specific tab group is actually used. This is useful for keeping the settings clean and only showing relevant options to the user.

To mark a tab group as local, add "isLocal": true to its configuration.

Example:

For example, this tab group is only specific to this page:

By setting it as local in the configuration, the "Local Tab Configuration" option will only show up in the settings on pages containing that tab group.

If all tab configurations (and other component configurations) are local, and a given page has no configured elements, neither the modal nor the modal icon will appear.

Configuration file setting this option:

{
  "config": {
    "tabGroups": [
      {
        "groupId": "ltab",
        "label": "Local Tab Configuration",
        "isLocal": true, // This makes the group local
        "tabs": [
          { "tabId": "lt1", "label": "Tab Option 1" },
          { "tabId": "lt2", "label": "Tab Option 2" },
          { "tabId": "lt3", "label": "Tab Option 3" }
        ]
      }
    ]
  }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Defining Local Components

You can ensure that specific local tab groups are always available in the settings, even if they are not initially visible on the page. This is useful for tab groups that are loaded dynamically (e.g., inside a dropdown menu) and might not be detected by the plugin otherwise.

To do this, add a data-cv-page-local-tabs attribute to any element (an empty <div> is a good choice). The value of this attribute should be a comma-separated list of the local tab group IDs you want to register.

For example, to make the local tab groups with IDs OS and language available in the settings, add the following to your page:

<div data-cv-page-local-tabs="OS, language"></div>

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

This will ensure that the specified local tab groups appear in the configuration settings, allowing users to control them even if they are not immediately visible on the page.

Shareable URL

Active tab selections can be encoded in a URL using the tabs parameter. The format is a comma-separated list of groupId:tabId pairs, where each group ID and tab ID is individually encoded with encodeURIComponent.

?tabs=os:linux,lang:python

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Only the tab groups explicitly listed are affected; all others retain the visitor's saved selection or the configured default.

Constructing the URL in JavaScript:

const tabs  = { os: 'linux', lang: 'python' };
const param = Object.entries(tabs)
  .map(([g, t]) => `${encodeURIComponent(g)}:${encodeURIComponent(t)}`)
  .join(',');
const url = `https://yoursite.com/guide.html?tabs=${param}`;

    

    Copy
    

    


    
    
    
    

    Wrap Text