fix: navbar active link should match the most specific path#8999
Conversation
nested nav items highlighted together because the active check only looked at the first path segment, so /about and /about/sponsors both matched on any /about page. NavBar now picks the longest link that prefixes the current path and passes an explicit active flag to each item, so a parent stays active on its own sub-pages but hands off to a more specific child. this adds an optional active prop on BaseActiveLink that other callers like Sidebar and Footer don't set, so their behavior is unchanged. Signed-off-by: Nikhil Kumar Rajak <ryzrr.official@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview Adds exported
Reviewed by Cursor Bugbot for commit 0079837. Bugbot is set up for automated code reviews on this repo. Configure here. |
Description
fix navbar active-link matching that only compared the first path segment, so two items sharing a segment could highlight together. now the most specific link (longest matching prefix) wins.
Validation
run
pnpm testin packages/ui-components for the new getActiveNavLink and active-override tests. node's own top nav is unchanged since its items are single-segment, this fixes the nested case for package consumers whose nav has items like /about and /about/sponsors.Related Issues
none, raised with the maintainers beforehand.
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.