Tabs

The Tabs component (ui:tabs) organizes content into multiple switchable panels, each identified by a label. Only one tab panel is visible at a time. Tabs are a container component — each tab’s content field contains Markdown that the compiler re-parses recursively into child blocks.

Example

View Glyph Markdown source

```ui:tabs
tabs:
  - label: Overview
    content: |
      This is the **overview** tab with standard Markdown.

      It can contain multiple paragraphs and inline formatting.
  - label: Installation
    content: |
      Run the following command to install:

      - `pnpm add @glyphjs/runtime`
      - `pnpm add @glyphjs/schemas`
  - label: Configuration
    content: |
      Edit `glyph.config.ts` to set up your theme and plugins.
```

Properties

Property	Type	Required	Default	Description
tabs	Tab[]	Yes	—	An array of tab objects. Must contain at least one tab.

Tab object

Property	Type	Required	Default	Description
label	string	Yes	—	The text shown on the tab button.
content	string	Yes	—	Markdown content rendered inside the tab panel. Parsed recursively by the compiler.

Content nesting

Since Markdown fenced blocks cannot nest, tab children are expressed as Markdown strings inside the YAML content fields. The compiler parses each content field recursively, producing child Block[] entries in the IR.

Supported content inside tabs:

• Paragraphs with inline formatting (bold, italic, code, links)
• Bullet and numbered lists
• Code blocks (indented by 4 spaces inside the YAML literal block scalar)
• Images and links

Nested ui: components inside tab content are not supported in v1 and are deferred to v2.

Interaction events

When interactive: true is set, the tabs component emits a tab-select event each time the user switches tabs (via click or keyboard).

```ui:tabs
interactive: true
tabs:
  - label: Overview
    content: Overview content here.
  - label: Details
    content: Detailed content here.
```

Event kind: tab-select

Payload field	Type	Description
tabIndex	number	0-based index of the selected tab.
tabLabel	string	The label text of the selected tab.

Accessibility

• Tabs implement the WAI-ARIA Tabs pattern (role="tablist", role="tab", role="tabpanel").
• Arrow keys navigate between tab buttons; Enter/Space activates a tab.
• The active tab button receives aria-selected="true" and its panel receives focus on activation.
• Tab panels are associated with their tab buttons via aria-labelledby and aria-controls attributes.