#PageTabs

#Basic usage

# Getting started

import { PageTabs, PageTab } from '@theme';

<PageTabs>
<PageTab label="PageTab 1">

## Foo

</PageTab>

<PageTab label="PageTab 2">

## Bar

</PageTab>
</PageTabs>

#Using MDX fragments

It's recommended to use MDX fragments to split a page into multiple sub-pages.

# Getting started

import { PageTabs, PageTab } from '@theme';
import Foo from './fragments/_foo.mdx';
import Bar from './fragments/_bar.mdx';

<PageTabs>
  <PageTab label="PageTab 1">
    <Foo />
  </PageTab>
  <PageTab label="PageTab 2">
    <Bar />
  </PageTab>
</PageTabs>

#Dynamic TOC

Based on extensive feedback from V1 users, we found that users often encountered issues with incorrect static TOC extraction when using MDX fragments that include headers.

Rspress V2 introduces Dynamic TOC, which dynamically generates the TOC at runtime by monitoring DOM changes through MutationObserver. This ensures TOC accuracy and allows users to leverage the full flexibility of MDX fragments. This also makes the <PageTabs /> component possible.

import { useDynamicTOC } from '@theme';