Highlight a link a different page (index) on nav

[rcsilva83]

Hi!

I'm new to MkDocs and I don't know the best way to achieve the following:

1. I have a series pages inside a /guides/ folder, including a index.md with the links to all the guide pages
2. I want to have only a "Guides" entry on navigation pointing to the /guides/index.md
3. I want to highlight the "Guides" link on navigation when I'm viewing any guide

Is it possible? If not, is there any alternatives?

Thanks in advance :)

[kamilkrzyskow]

Hello @rcsilva83,
you'll likely need a mix of JavaScript and CSS to do that. Similar to your use case at GMC we wanted to focus the navigation on the active tree, so we implemented a bit of JavaScript which specifies which nav items need fading and later the CSS handles the rest.

So in your case the JavaScript could target the current location URL and if the files is under /guides/ then add a special highlight class to the Guides navigation item.

firefox_XlLVHs1M0Q.mp4

Reference:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript
• https://squidfunk.github.io/mkdocs-material/customization/#additional-css
• https://github.com/Gothic-Modding-Community/gmc/blob/88d19bcae8a6c869314ae82c147779103063eaa5/overrides/assets/javascripts/extra.js#L425-L433
• https://github.com/Gothic-Modding-Community/gmc/blob/88d19bcae8a6c869314ae82c147779103063eaa5/overrides/assets/stylesheets/extra.css#L5-L18