ContentTabs

Use ContentTabs when readers should choose between related alternatives, such as quick and detailed instructions. Tab widths follow their titles; selecting a tab reveals its full-width card body. Avoid tabs for an ordered process or when every section must be compared at once: use headings, a table, or ContentStepSequence instead.

Parameters

Parameter	Required	Default	Description
`label`	Yes	None	Accessible name describing the tab group.
`defaultIndex`	No	`0`	Zero-based index of the initially selected panel. Must select an existing panel.

ContentTab helper

ContentTab is a nested helper, not a separate selectable visual element. Use two or more direct ContentTab children, each with a title and non-empty body.

Parameter	Required	Default	Description
`title`	Yes	None	Visible tab title; widths adjust to the title.
`icon`	No	None	Decorative emoji or text symbol beside the title.
`iconSrc`	No	None	URL of a decorative image, such as an SVG harness icon. Appears beside the tab title and optional panel heading; takes precedence over `icon`.
`heading`	No	None	Optional visible heading at the top of the panel body.
`headingLevel`	No	`3`	Integer heading level from 2 to 6. Choose a level appropriate to the surrounding document.

Example

<ContentTabs label="Publishing instructions" defaultIndex={0}>
  <ContentTab title="Quick start" icon="⚡" heading="Start publishing" headingLevel={3}>
    <p>Prepare a draft and submit it for review.</p>
  </ContentTab>
  <ContentTab title="Detailed instructions" heading="Review the evidence">
    <p>Record the source, owner, and review date before submitting the draft.</p>
  </ContentTab>
</ContentTabs>

Start publishing

Prepare a draft and submit it for review.

Review the evidence

Record the source, owner, and review date before submitting the draft.

Link to a tab

Each tab panel receives a stable ID derived from its title: lowercase letters and numbers separated by hyphens. For the example above, use Quick start or Detailed instructions. A direct URL ending in #detailed-instructions opens that panel on page load. Following a heading link inside a panel also opens the containing tab, including nested groups.

Repeated titles or collisions with existing document headings receive numeric suffixes such as quick-start-2. Keep titles stable after publishing links; changing a title changes its fragment ID.

Accessibility and composition

Tabs support click, Enter/Space, Left/Right arrows, Home, and End, with a visible focus indicator. The tab row scrolls horizontally on small screens. Icons supplement the title and are hidden from assistive technology. For an SVG icon, supply its published asset URL as iconSrc; the visible title and heading provide its accessible name. Keep titles descriptive and essential conclusions in surrounding prose.

Fenced code blocks in panels receive a copy button when JavaScript is enabled. Use a text fence for an installation prompt: the button reads “Copy prompt,” and the text wraps within the panel.

Without JavaScript, all panels appear in reading order with their headings or title text. Panel bodies may contain ordinary MDX or complete visual elements, including a file tree. Nested tab groups remain independent.

The design follows Fumadocs tabs, adapted to GoVisit’s shared static rendering and styling.