Skip to content

[docs] Highlight Releases sidenav item on version subpages#4651

Open
LukasTy wants to merge 2 commits intomui:masterfrom
LukasTy:claude/wizardly-wescoff-8371e4
Open

[docs] Highlight Releases sidenav item on version subpages#4651
LukasTy wants to merge 2 commits intomui:masterfrom
LukasTy:claude/wizardly-wescoff-8371e4

Conversation

@LukasTy
Copy link
Copy Markdown
Member

@LukasTy LukasTy commented Apr 20, 2026

Summary

The docs sidebar used an exact pathname match to decide the active item, so visiting a version subpage such as /react/overview/releases/v1-4-0 left the "Releases" entry inactive — readers lost their place in the nav.

This updates SideNav.Item to also treat a nav item as active when the current pathname is a descendant of its href:

Screenshot 2026-04-20 at 12 36 09
const active = pathname === href || pathname.startsWith(`${href}/`);

The trailing / guard prevents spurious matches (e.g. releases-archive would not count as a child of releases).

Why this is safe

All other sidebar sections (Overview, Handbook, Components, Utils) list flat leaf pages — no sibling href is a prefix of another, and releases/ is the only section with rendered subpages that are not themselves sidebar items. External items use full URLs, so the new startsWith check cannot match app pathnames.

Test plan

  • Visit /react/overview/releases — "Releases" highlighted.
  • Visit /react/overview/releases/v1-4-0 — "Releases" highlighted (data-active / aria-current set).
  • Visit /react/overview/releases/v1-0-0-beta-7 — "Releases" highlighted.
  • Visit /react/overview/quick-start — only "Quick start" highlighted.
  • Visit /react/components/accordion — only "Accordion" highlighted.
  • No console errors.

🤖 Generated with Claude Code

The sidebar's active state used an exact pathname match, so visiting a
version subpage like /react/overview/releases/v1-4-0 left the "Releases"
item inactive. Match descendant paths as well so the parent stays active.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 20, 2026

commit: 8116007

@LukasTy LukasTy added docs Improvements or additions to the documentation. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Apr 20, 2026
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 20, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 8116007
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69e5f70aab582200084fd6f0
😎 Deploy Preview https://deploy-preview-4651--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@LukasTy LukasTy marked this pull request as ready for review April 20, 2026 09:52
@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented Apr 20, 2026

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,685.06 ms 🔺+292.89 ms(+21.0%) | Renders: 53 (+0) | Paint: 2,594.64 ms 🔺+434.02 ms(+20.1%)

Test Duration Renders
Slider mount (300 instances) 207.70 ms 🔺+65.46 ms(+46.0%) 3 (+0)
Tooltip mount (300 contained roots) 95.77 ms 🔺+29.27 ms(+44.0%) 2 (+0)
Scroll Area mount (300 instances) 116.23 ms 🔺+33.54 ms(+40.6%) 3 (+0)
Tabs mount (200 instances) 311.51 ms 🔺+88.30 ms(+39.6%) 4 (+0)
Checkbox mount (500 instances) 90.91 ms 🔺+18.29 ms(+25.2%) 1 (+0)

...and 7 more. View full report

Details of benchmark changes


Check out the code infra dashboard for more information about this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant