Skip to content

Highlight Active Navigation Item #81

Closed
#86
Closed
Highlight Active Navigation Item#81
#86
Assignees
Parshant-12
Labels
ECSoC26Official label for ECSoC26 event contributions.ECSoC26-L1Level 1 contribution for the ECSoC26 event.assignedIndicates that the issue has been assigned to a contributor who is actively working on it.enhancementNew feature or requestfrontendFrontend developmentgood first issueGood for newcomersgood-first-issueGood for newcomerslevel:beginnerSuitable for first-time or beginner contributors.mentor:Krish-KhinchiAssigned mentor responsible for reviewing and guiding this contribution.priority:mediumMedium priority task.quality:cleanMeets project quality standards.size/SSmall contribution with limited scope.type:frontendChanges frontend or client-side code.type:performanceImproves speed, efficiency, or resource usage.type:uiUpdates user interface or visual components.websiteRelated to the project's website.

Description

@krishkhinchi
krishkhinchi
opened on Jul 19, 2026

Description

Navigation should clearly indicate the currently active page.

Implement automatic active state highlighting for all navigation links.

Requirements

  • Detect current route.
  • Highlight active item.
  • Smooth transition.
  • Support nested routes where applicable.
  • Mobile navigation support.

Acceptance Criteria

  • Correct item highlighted.
  • Updates automatically on navigation.
  • Consistent styling.

Labels

good first issue frontend

Metadata

Metadata

Assignees

Labels

ECSoC26Official label for ECSoC26 event contributions.ECSoC26-L1Level 1 contribution for the ECSoC26 event.assignedIndicates that the issue has been assigned to a contributor who is actively working on it.enhancementNew feature or requestfrontendFrontend developmentgood first issueGood for newcomersgood-first-issueGood for newcomerslevel:beginnerSuitable for first-time or beginner contributors.mentor:Krish-KhinchiAssigned mentor responsible for reviewing and guiding this contribution.priority:mediumMedium priority task.quality:cleanMeets project quality standards.size/SSmall contribution with limited scope.type:frontendChanges frontend or client-side code.type:performanceImproves speed, efficiency, or resource usage.type:uiUpdates user interface or visual components.websiteRelated to the project's website.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions