feat(theme/nav): support multiple level nested navigation items#2943
Merged
feat(theme/nav): support multiple level nested navigation items#2943
Conversation
✅ Deploy Preview for rspress-v2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Rsdoctor Bundle Diff AnalysisFound 3 projects in monorepo, 2 projects with changes. 📊 Quick Summary
📋 Detailed Reports (Click to expand)📁 nodePath:
📦 Download Diff Report: node Bundle Diff 📁 webPath:
📦 Download Diff Report: web Bundle Diff Generated by Rsdoctor GitHub Action |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements multi-level nested navigation support for both desktop (HoverGroup) and mobile (NavScreenMenuItem) navigation components, enabling unlimited depth navigation hierarchies.
Key changes:
- Recursive rendering of nested navigation items with visual hierarchy through progressive indentation
- Type system updates to support recursive NavItem structures
- Bug fix for icon animation in mobile navigation when items have both links and children
- Comprehensive E2E tests validating 3-level deep navigation
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/shared/src/types/theme/nav.ts | Updated NavItemWithChildren and NavItemWithLinkAndChildren to use recursive NavItem[] type instead of NavItemWithLink[] |
| packages/shared/src/runtime-utils/sidebar.ts | Enhanced matchNavbar to use normalizeHref for consistent active state matching |
| packages/core/src/theme/components/NavScreen/NavScreenMenuItem.tsx | Fixed icon animation bug by adding href prop support and improving conditional rendering logic |
| packages/core/src/theme/components/Nav/NavMenu.tsx | Refactored variable naming for consistency (item → menuItem) |
| packages/core/src/theme/components/HoverGroup/index.tsx | Added HoverGroupItem component with recursive rendering and depth tracking for multi-level navigation |
| packages/core/src/theme/components/HoverGroup/index.scss | Removed hardcoded padding-left to support dynamic indentation based on depth |
| packages/core/src/node/runtimeModule/siteData/normalizeThemeConfig.ts | Removed unnecessary type annotation allowing recursive item processing |
| packages/core/src/node/auto-nav-sidebar/walk.ts | Improved error handling with createError utility and better file existence checking |
| e2e/fixtures/nav-link-items/index.test.ts | Added comprehensive tests for 3-level nested navigation with depth attribute validation |
| e2e/fixtures/nav-link-items/doc/_nav.json | Added multi-level nested navigation test data structure |
| e2e/fixtures/nav-link-items/doc/nested-items/*.md | Added test fixture pages for nested navigation items |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Added tag display functionality to HoverGroup component to maintain consistency with NavScreenMenuItem. Tags will now be displayed next to navigation items in dropdown menus. Changes: - Import Tag component from @theme - Add tag display in all navigation item render cases - Update styles to support flex layout with gap for tags 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Timeless0911
approved these changes
Dec 30, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds support for multiple level nested navigation items in both desktop (
HoverGroup) and mobile (NavScreenMenuItem) navigation components, along with comprehensive e2e tests.Main Features
1. Multi-level Nested Navigation Support
HoverGroupnow supports recursive rendering of nested navigation items with unlimited depthNavScreenMenuItemnow properly handles deeply nested navigation with expand/collapse functionalitydepthprop to track nesting level (starts from 0)data-depthattribute to all nav items for CSS targeting and testing2. Visual Hierarchy
8 + depth * 12pixels3. Bug Fixes
linkanditemsinNavScreenMenuItem--openclass is now correctly applied to Link components with children4. Comprehensive E2E Tests
data-depthattributes at each levelChanges
packages/core/src/theme/components/HoverGroup/- Recursive nested item renderingpackages/core/src/theme/components/NavScreen/NavScreenMenuItem.tsx- Icon animation fixe2e/fixtures/nav-link-items/- Multi-level nested navigation test casesRelated Issue
N/A - Feature enhancement
Checklist