
rspress-nav
by savvy-web
Build modern ESM Node.js libraries with minimal configuration. Handles TypeScript declarations, package.json transformations, and PNPM workspace resolution automatically.
SKILL.md
name: rspress-nav description: Configure RSPress navigation bars and sidebars with _nav.json and _meta.json files. Use when setting up navigation, organizing sidebar sections, or configuring collapsible menu items. allowed-tools: Read, Write, Edit, Glob, Grep agent: rspress-doc-agent
RSPress Navigation Configuration
Configure RSPress navigation using _nav.json (navbar) and _meta.json (sidebar) files.
Navigation Architecture
RSPress uses two navigation systems:
- Top Navbar (
_nav.json) - Global navigation in the header - Sidebar (
_meta.json) - Contextual navigation per section/directory
Navbar Configuration
Place _nav.json in the docs root (e.g., docs/src/en/_nav.json).
Navbar Item Fields
| Field | Type | Description |
|---|---|---|
text | string | Display text for the nav item |
link | string | URL or path to navigate to |
activeMatch | string | Regex pattern to match active routes |
items | array | Nested dropdown items |
Example Navbar
[
{
"text": "Guide",
"link": "/guide/introduction",
"activeMatch": "^/guide/"
},
{
"text": "API",
"items": [
{ "text": "Core API", "link": "/api/core" },
{ "text": "Plugins", "link": "/api/plugins" }
]
}
]
Sidebar Configuration
Place _meta.json in each directory to configure sidebar for that section.
Sidebar Entry Fields
| Field | Type | Description |
|---|---|---|
type | string | Entry type: file, dir, or divider |
name | string | File/directory name (without extension) |
label | string | Display text (overrides page title) |
collapsible | boolean | Allow expanding/collapsing (dir only) |
collapsed | boolean | Initial collapsed state (dir only) |
link | string | Custom link for directory entries |
Example Sidebar
[
{
"type": "file",
"name": "introduction",
"label": "Getting Started"
},
{
"type": "dir",
"name": "concepts",
"label": "Core Concepts",
"collapsible": true,
"collapsed": false
},
{
"type": "divider"
},
{
"type": "file",
"name": "advanced"
}
]
Common Navigation Patterns
Auto-Generated Sidebar
Omit _meta.json to auto-generate sidebar from directory structure.
Section Dividers
Use {"type": "divider"} to create visual separators in the sidebar.
Nested Directories
Place _meta.json in subdirectories to configure nested sidebar sections. Each directory can have its own metadata configuration.
Active Route Matching
Use activeMatch with regex to highlight navbar items:
{
"text": "Documentation",
"link": "/docs/intro",
"activeMatch": "^/docs/"
}
Configuration Instructions
- Create navbar - Add
_nav.jsonin docs root with top-level navigation items - Configure sections - Add
_meta.jsonin each directory to define sidebar structure - Set labels - Use
labelfield to override default titles - Organize with dividers - Add dividers to group related items
- Enable collapsing - Set
collapsible: truefor expandable directory sections - Test navigation - Verify active states and links work correctly
File Structure Example
docs/src/en/
├── _nav.json # Top navbar configuration
├── guide/
│ ├── _meta.json # Guide section sidebar
│ ├── introduction.md
│ └── advanced.md
└── api/
├── _meta.json # API section sidebar
└── reference.md
Notes
- File
namemust match the actual filename (without.mdextension) - Auto-generated sidebars use alphabetical order
- Navbar supports one level of nested dropdown items
- Sidebar supports unlimited nesting via directory structure
Score
Total Score
Based on repository quality metrics
SKILL.mdファイルが含まれている
ライセンスが設定されている
100文字以上の説明がある
GitHub Stars 100以上
3ヶ月以内に更新がある
10回以上フォークされている
オープンIssueが50未満
プログラミング言語が設定されている
1つ以上のタグが設定されている
Reviews
Reviews coming soon