vitepress
vitepress copied to clipboard
vuejs
Highlight active sidebar item when child page is loaded
Is your feature request related to a problem? Please describe.
Not every page in my docs should be in the sidebar. For example having a top-level page "Learn to do X" and that page pointing to variants with different technologies.
If the sidebar has /guide and I visit /guide, then the sidebar item for the route is highlighted with an active state. If I visit /guide/subpage, it does not.
This makes it hard for users to know where they are on a website, and does not auto-expand the section they are in.
Describe the solution you'd like
Either behavior that child pages make the parent page active in the sidebar, or provided as an option.
Describe alternatives you've considered
No response
Additional context
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Read the Contributing Guidelines.
- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.
Once again, briefly summarized. You have a page (.md file) which is also included in your sidebar. This page contains links to other specialized pages which should not be listed in the sidebar.
The problem Vitepress has is that it can't always assume that the project directory is structured the same way as the manually created sidebar.
A possible solution could be to also iniclude activeMatch for a sidebar item, like it is currently for the navigation item: activeMatch: '^/learn-to-do-x' or try to guess the current active sidebar page by checking the current full path against all paths for pages added in the sidebar.
I have the same scene requirement. It would be great if the sidebar could support configuring activeMatch.
We will will also highly benefit from such a activeMatch field.
For now, we had to implement some custom JS code that runs on every window scroll event and manually sets the active sidebar item
