Add Active Navigation State Indicator in Navbar

[mythri2405]

Problem Statement

The navigation bar currently does not provide a visual indication of the active page. All navigation items appear identical, making it difficult for users to determine their current location within the website.

Proposed Solution

Implement an active state indicator for navbar links.

Possible approaches:

• Highlight the active tab with a different text color.
• Add an underline or bottom border to the active item.
• Use a pill-style background for the selected tab.
• Add a smooth transition animation when switching between tabs.

The active state should update automatically based on the current route.

Expected Outcome

• Users can instantly identify which page they are currently viewing.
• Improved navigation clarity and overall user experience.
• Consistent and modern navigation behavior across the application.

Steps

1. Identify the current route using the routing solution used in the project.
2. Apply an active class/style to the corresponding navigation item.
3. Design a visually distinct active state that matches the existing theme.
4. Ensure the active indicator updates correctly when navigating between pages.
5. Test responsiveness across desktop and mobile views.

Screenshot

[mythri2405]

Hi, I am a contributor under GSSoC'26 and would like to work on this issue. Could you please assign it to me?

[Stewartsson]

Hi @komalharshita @mythri2405 , I am a contributor under GSSoC'26 and would like to work on this issue. Could you please assign it to me as my system is ready to work on it

[vanshdixit1]

Hi @komalharshita ,

I would like to work on this issue under GSSoC'26. I have reviewed the requirements and am confident I can contribute effectively. If possible, could you please assign this issue to me?

Thank you!

[jyotsnak1603]

Hi @komalharshita ,
I would like to work on this issue under GSSoC 2026.
I have reviewed the requirements and already have experience with HTML, CSS, JavaScript, and responsive UI development. I can start working on it immediately once assigned.
Could you please assign it to me?
Thank you.

[Yagnesh109]

Hi @komalharshita ,

I would like to work on this issue under GSSoC'26.

I have reviewed the problem statement and understand the requirement of implementing an active state indicator for the navbar. I can update the navigation component to dynamically detect the current route and apply a visually distinct active style (such as a highlighted text color, underline, or pill-style background) while maintaining consistency with the existing design system. I will also ensure smooth transitions and proper responsiveness across desktop and mobile devices.

Please assign this issue to me.

Thank you!

[bhatiakavisha]

Hi @komalharshita,
I am a GSSoC'26 contributor and would like to work on this issue.
I have reviewed the issue requirements and the project's contributing guidelines. I understand that the task involves implementing an active navigation state indicator that updates based on the current route while maintaining responsiveness and consistency with the existing design.
I would be grateful if you could assign this issue to me.

Thank you!

[bhatiakavisha]

Hi @komalharshita,

I have completed the implementation for this issue and submitted a PR.

PR: #996

Implemented dynamic active navigation state indicators using Jinja request.path checks across the relevant navigation menus and verified the changes on desktop and mobile views.

Thank you!

[SathvikMunaga]

Hi, @komalharshita I am part of GSSoc 2026 can you please assign me this.