[Feature]: Add Dropdown Navigation for Practice Modules

[sanikayadav2024]

Problem or limitation

Problem Statement

The Practice option in the navigation bar currently redirects users to a separate page containing all practice modules. Users must navigate through the page to find a specific module, which can become less efficient as more modules are added.

Proposed solution

Proposed Solution

Convert the Practice navigation item into a dropdown menu that displays all available practice modules directly from the navbar.

Alternatives considered

Alternatives Considered

• Keeping the current Practice page and adding a module filter.
• Adding a sidebar navigation within the Practice page.
• Implementing quick-access cards on the homepage.

Use case

Example dropdown structure:

• Practice

  • Sorting Module
  • Searching Module
  • Graphs Module
  • Arrays Module
  • Backtracking Module
  • Challenges Module

This would allow users to access a specific module directly from any page without first visiting the Practice page.

Hovering over or clicking the Practice navigation item should display a dropdown list of all available modules, allowing users to navigate directly to their desired module.

Additional context

Additional Context

A navbar dropdown would improve navigation efficiency, reduce the number of clicks required to access modules, and provide better scalability as new practice modules are introduced.

[sanikayadav2024]

I would like to work on this under GSSoC'2
/assign gssoc

[Shreeya1207]

Hello 👋 @adityapaul26
I would like to contribute to this issue under GSSoC. Could you please assign it to me?
I’ve gone through the problem and I’m confident I can work on it. I’ll raise a PR as soon as possible.
Thank you!

[karishmaram-tech]

Hi! I am a GSSoC 2026 contributor and would like to work on this issue. I can implement the backdrop click functionality for the Search Modal and test it across desktop and mobile devices. Could you please assign it to me?

[NehaKuppili]

/assign

Hello Maintainers,

I would like to work on this issue as part of GSSoC.

After reviewing the issue description, I understand that the current Practice navigation item redirects users to a separate page containing all practice modules. As the number of modules grows, users need to take additional navigation steps to locate and access a specific module, which can impact overall usability and navigation efficiency.

My understanding of the implementation is:

• Analyze the current navbar structure and identify how the Practice navigation item is configured.

• Convert the existing Practice navigation item into a dropdown menu that displays all available practice modules directly from the navbar.

• Ensure that each dropdown option correctly redirects users to its corresponding module page.

• Maintain a clean and responsive UI so that the dropdown works seamlessly across different screen sizes and devices.

• Verify that the implementation improves navigation efficiency while preserving existing functionality.

This enhancement would allow users to access specific practice modules directly from any page, reducing navigation steps and creating a more intuitive user experience.

I would be grateful for the opportunity to work on this issue and contribute to the project.

Thank you for your consideration.

[Antra1705]

The navbar's Practice item needs to be converted from a redirect link to a dropdown component. I'll build a PracticeDropdown component with hover/click toggle, rendering links for each module (Sorting, Searching, Graphs, Arrays, Backtracking, Challenges), accessible via keyboard, and closing on outside click using a useRef + useEffect pattern.
My AlgoRacer project is an algorithm visualizer built in React — I'm familiar with this domain and the component patterns needed here.
Contributing under GSSoC '26. Could you please assign this to @Antra1705?

[PranavAgarkar07]

/claim

I can add the dropdown navigation for Practice modules. My approach:

• Create a PracticeDropdown React component with hover/click toggle state
• Populate dropdown items from the existing practice modules data structure
• Use React Router navigate/Link for direct navigation to each module
• Style with Tailwind: absolute-positioned dropdown below the Practice nav item
• Add smooth fade/slide transition
• Ensure keyboard accessibility (arrow keys, Enter to select, Esc to close)
• Close dropdown when clicking outside using useRef + useEffect pattern

[asiyamujawar]

Hello, I would like to work on this issue under GSSoC 2026. Could you please assign it to me?

[pooja-0206]

/assign
I'd like to work on this — contributing under GSSoC'26

[jyotsnachary]

/assign

[github-actions]

🎉 Issue Assigned!

Hey @jyotsnachary! 🎉 You have been successfully assigned to this issue.

According to our Issue Claiming Policy:

• Please submit your pull request within 2–3 days.
• If no progress or update is provided, this issue may be reassigned.

Happy coding! 🚀

---

_{🤖 AlgoScope Automation}