Skip to content

Highlight currently active page in sidebar docs navigation#9993

Merged
browniebroke merged 6 commits into
encode:mainfrom
harshitkandpal:fix/highlight-active-sidebar-page
Jul 1, 2026
Merged

Highlight currently active page in sidebar docs navigation#9993
browniebroke merged 6 commits into
encode:mainfrom
harshitkandpal:fix/highlight-active-sidebar-page

Conversation

@harshitkandpal

@harshitkandpal harshitkandpal commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Description

This PR addresses a minor documentation UI issue where the currently viewed page is not visually highlighted or distinguished in the sidebar navigation. This can make it disorienting to know exactly which section a reader is currently browsing.

I have updated the custom extra.css file to target the theme's active navigation link component (a.md-nav__link.md-nav__link--active), applying a bold font-weight and utilizing the project's pre-defined --md-accent-fg-color branding token. This ensures a clear visual cue that remains seamless across both light and dark modes without highlighting the entire parent category header accidentally.

Related Discussion

As requested in the contributing guidelines, this pull request follows an approved proposal:
Fix #9992

Checklist

  • I have read the CONTRIBUTING.md document.
  • My changes only affect the documentation styling (extra.css) and do not modify core logic.
  • Verified locally using mkdocs serve across pages.

@harshitkandpal

Copy link
Copy Markdown
Contributor Author

Hey @browniebroke
just a quick heads-up that I've submitted the PR for this here: #9993. All the automated checks passed, so it’s ready for your review whenever you have a moment. Thanks!

Comment thread docs/theme/stylesheets/extra.css Outdated
browniebroke
browniebroke previously approved these changes Jul 1, 2026
browniebroke
browniebroke previously approved these changes Jul 1, 2026
@browniebroke browniebroke changed the title docs: Highlight currently active page in sidebar navigation #9992 Highlight currently active page in sidebar docs navigation Jul 1, 2026
Comment thread docs/theme/stylesheets/extra.css Outdated
@browniebroke browniebroke dismissed their stale review July 1, 2026 07:36

Accessibility issue found

@harshitkandpal

Copy link
Copy Markdown
Contributor Author

Hey @browniebroke,
thanks for the review! That makes total sense regarding the contrast ratio.

I've updated the CSS selector to use the --md-accent-fg-color--dark token as you suggested so it fully complies with the WCAG AA accessibility standards. All the CI checks have passed successfully again. Ready for another look whenever you have a moment!

@browniebroke browniebroke merged commit 6f0b74d into encode:main Jul 1, 2026
7 checks passed
@browniebroke

Copy link
Copy Markdown
Member

Thanks!

@harshitkandpal

Copy link
Copy Markdown
Contributor Author

Thanks @browniebroke!
It's a pleasure to be able to help out and contribute back to the open-source community.
Glad I could help make the docs a little easier to navigate! ☺️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants