PageTabs

Info

The PageTabs component creates sub-tabs within a page, allowing a single page to be split into multiple sub-pages. Each page may contain exactly one PageTabs.

API

How it works

Basic usage

docs/guide/getting-started.mdx

# 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.

docs/guide/getting-started.mdx

# 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';

#PageTabs

#Basic usage

#Using MDX fragments

#PageTabs

#Basic usage

#Using MDX fragments

PageTabs

Basic usage

Using MDX fragments

PageTabs

Basic usage

Using MDX fragments