reactjs
[suggestion]: Sidebar menu items do not toggle closed when clicked again
Summary
Hi! I’ve noticed a small UX inconsistency in the sidebar navigation of the React documentation site.
Current Behavior
When you click on a sidebar menu item that has child routes (e.g., "React APIs" or "Hooks"), it expands as expected.
However, clicking the same item again does not collapse it. The only way to collapse it is by navigating elsewhere or clicking a different section.
Page
https://react.dev/learn
Details
When the menu is expanded, the arrow icon suggests interactivity (it rotates to indicate an open state and remains clickable), but clicking it has no effect. This can be confusing from a UX perspective since the visual cue implies that it should toggle.
✅ Expected Behavior Sidebar menu items should toggle open/closed when clicked. That is:
If the item is not expanded, clicking it should expand it (✅ this works).
If the item is already expanded, clicking it again should collapse it (❌ currently not working).
This behavior aligns with common UX patterns for collapsible menus and improves usability, especially on smaller screens or when quickly navigating sections.
Would you be open to a pull request? I'd be happy to submit a PR implementing this behavior if you think it's a good fit for the site. Let me know your thoughts!
Hey @leonardosantosp 👋
I noticed this issue and have raised a PR to fix it: #7725 🎉.
The PR optimizes the sidebar UI, ensuring that menu items properly toggle open/closed when clicked while also improving performance by reducing unnecessary re-renders. 🚀
Let me know if there's any feedback or additional changes needed!
