close
Rspress
  • English

      • PageTabs experimental

      Info

      The PageTabs component creates sub-tabs within a page so a single page can be split into multiple views. To keep anchors and the TOC correct, each page may contain exactly one PageTabs.

      API
      How it works

      Basic usage

      docs/guide/getting-started.mdx
      # Getting started

import { PageTabs, PageTab } from '@rspress/core/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.

      docs/guide/getting-started.mdx
      # Getting started

import { PageTabs, PageTab } from '@rspress/core/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 static TOC extraction often failed when using MDX fragments that include headers.

      Rspress V2 introduces Dynamic TOC, which generates the TOC at runtime by monitoring DOM changes through MutationObserver. This keeps the TOC accurate while letting you fully leverage MDX fragments, making the <PageTabs /> component possible.

      import { useDynamicTOC } from '@rspress/core/theme';