Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight active sidebar item when child page is loaded #2257

Open
4 tasks done
phazonoverload opened this issue Apr 19, 2023 · 6 comments
Open
4 tasks done

Highlight active sidebar item when child page is loaded #2257

phazonoverload opened this issue Apr 19, 2023 · 6 comments
Labels

Comments

@phazonoverload
Copy link

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

@MarkusKeck
Copy link
Collaborator

MarkusKeck commented Apr 20, 2023

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.

@phazonoverload
Copy link
Author

Yes exactly. Well summarised- thank you.

@Red-Asuka
Copy link

I have the same scene requirement. It would be great if the sidebar could support configuring activeMatch.

@github-actions github-actions bot removed the stale label Oct 19, 2023
@github-actions github-actions bot added the stale label Nov 25, 2023
@DominusKelvin
Copy link
Contributor

Yeah I think this will be a great addition.

@github-actions github-actions bot removed the stale label Feb 15, 2024
@ashercoren
Copy link

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

@github-actions github-actions bot added the stale label May 23, 2024
@briavers
Copy link

Is there any update or work around for this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants