close

Overview page

The Overview page displays an overview of all articles in a directory, automatically extracting information from the sidebar to generate grouped content.

Usage

Configure overview: true in the directory's index.md to enable it:

api/index.md
---
overview: true
title: API Overview
---

This is the API overview page.

The Overview page automatically reads the current directory's sidebar configuration and extracts article titles to generate grouped cards.

Example

Given the following directory structure and _meta.json configuration:

docs
api
_meta.json
index.md<-- overview: true
config
_meta.json
basic.mdx
theme.mdx
runtime
_meta.json
hooks.mdx
context.mdx
api/index.md
---
overview: true
title: API Overview
---

This is the API overview page.
api/_meta.json
[
  { "type": "file", "name": "index", "label": "API Overview" },
  { "type": "dir", "name": "config", "label": "Config" },
  { "type": "dir", "name": "runtime", "label": "Runtime" }
]

The generated Overview page looks like:

Overview page

This is the API overview page.

Config

Runtime

Configuration

overviewHeaders

Controls the heading levels displayed in the Overview page, defaults to [2] (only h2 headings).

Can be configured in _meta.json:

_meta.json
[
  {
    "type": "file",
    "name": "component",
    "overviewHeaders": [2, 3]
  }
]

Or in the article's frontmatter:

component.mdx
---
overviewHeaders: [2, 3]
---

Nested overview pages

Subdirectories can also have their own Overview pages by configuring overview: true in the subdirectory's index.md:

docs
api
index.md<-- overview: true
theme
index.md<-- overview: true (nested Overview page)
component.mdx
utils.mdx

Customization

If you need to fully customize the Overview page content, you can use the OverviewGroup component to build it manually:

index.mdx
---
overview: true
---

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

<OverviewGroup
  group={{
    name: 'Custom Group',
    items: [
      {
        text: 'Page Title',
        link: '/path/to/page',
        headers: [
          { id: 'section-1', text: 'Section 1', depth: 2 },
          { id: 'section-2', text: 'Section 2', depth: 2 },
        ],
      },
    ],
  }}
/>