[api-extractor] Navbar options (API, GitHub, Help) do not show active navigation state

[dwivediprashant]

Summary

While browsing the API Extractor documentation site, I observed that certain navbar options (API, GitHub, and Help) do not visually reflect the active navigation state. After navigating to these sections, the navbar does not highlight or otherwise indicate the currently selected item, making it unclear which section is active.

Repro steps

1. Open the API Extractor documentation site : https://api-extractor.com/
2. Click on navbar options such as API, GitHub, or Help.
3. Observe the navbar state after navigation. They do not displaying blue coloured activation state.

Expected result:

• The currently selected navbar option should be visually highlighted or marked as active.

Actual result:

• The navbar does not show any active state for API, GitHub, or Help options.

Details

This appears to be a UI/navigation state issue where certain navbar links are not included in the active-route detection logic. These links may be external routes or handled differently, so the active class/state is not being applied.

Screenshots

API route displaying docs option active

Github route displaying docs option active

Help route displaying docs option active

A possible fix could involve:

• Ensuring these routes are included in the active route matching logic.
• Applying consistent active state handling for both internal and external navigation items.

[dwivediprashant]

@elliot-nelson Hi, I can work on investigating and fixing this issue. If it’s okay, please assign it to me. I’ll keep the discussion updated with progress. Thanks!

[dwivediprashant]

@elliot-nelson And fork is disabled ; Is this repo not for outsiders

[dwivediprashant]

@lincong1987 I've fixed the issue please review my PR and if any update required inform me

[octogonz]

Thanks for making this fix! It affects all the Rush Stack subsites. I need to test them, then I will merge your PR.

[dwivediprashant]

@octogonz okay and if any correction required please inform me ; I will correct it

[octogonz]

Sorry I thought you were referring to PR #295. Your Microsoft-rushstack-websites/pull/2 is actually a PR against a personal repo (requesting to merge into your own repository's main branch), so there is no way for us to merge it here. You would need to create a proper fork and then redo your PR so that it targets the rushstack-websites. I gave some more detail in the Zulip thread.

[octogonz]

Expected result:

• The currently selected navbar option should be visually highlighted or marked as active.

Actual result:

• The navbar does not show any active state for API, GitHub, or Help options.

I'm not sure I agree.

In your screenshots, when you click the "GitHub" nav link, the "Docs" nav link becomes highlighted. It's slightly counterintuitive, but the reason is that it has navigated to a page located under the "Docs" navigation tree. In other words, you could reach the same page by clicking "Docs" then clicking around in the tree on the left, in which case it makes sense that "Docs" should be highlighted. The same is true for "Help". Whereas if you click "News", that goes to a top-level page that is actually outside the hierarchy, and therefore "News" does become highlighted.

So, I think the menu highlighting is functioning correctly according.

If we wanted to make the behavior more intuitive, we would need to either:

1. Move these pages outside the "Docs" hierarchy, and then reintroduce them in the Docs nav tree as links (and then Previous/Next buttons would no longer be linked), OR
2. Generalize the navigation so that IF a subpage has a top nav button, then that button should be highlighted instead of "Docs." In other words, highlight only one thing, and make it be the most selective thing.

#2 is a much better solution. It's perhaps a more intuitive design. However, as of Docusaurus 2 there wasn't any easy way to do that. Maybe Docusaurus 3 handles it differenty?

[dwivediprashant]

Thank you for clarification . I'll try to fix with docusaurus 3