[yangshun]

Closes #676. Implements the proposal in the issue.

What this adds

Link marks the link to the current page with aria-current="page" and data-void-active, in React, Vue, Svelte and Solid. Navigation menus no longer need to compare useRouter().path with each href by hand, and the current link gets aria-current by default.

<nav>
  <Link href="/">Home</Link>
  <Link href="/users" activeMatch="prefix">Users</Link>
</nav>

nav a[data-void-active] { font-weight: 600; }

• One new prop: activeMatch?: 'exact' | 'prefix', default 'exact'. prefix keeps a link active on nested pages.
• Two attributes: data-void-active on any match, aria-current="page" on an exact match only. On /users/42, the Users link above gets data-void-active but not aria-current.
• Overrides: an aria-current or data-void-active passed to Link replaces the computed value.

Matching rules

Rule	Behavior
Path	Compared after resolving the href against the current URL, decoded the way the server matches pages
Prefix	Whole segments only: /users matches /users/42, not /users-admin. / only matches itself
Letter case, trailing slash	Both count, like the router: /Admin and /admin/ don't match /admin
Query and hash	Ignored on both the link and the current URL
Other origins, non-GET links	Never active

The two open questions from the issue are settled to follow the router, which treats /admin/ and /Admin as different pages from /admin.

Implementation

linkActiveAttributes(router, link, match) in void/pages-client does the matching and returns the attributes, so the names, values and default can't drift between adapters. Each adapter passes its router (which changes with the route URL), spreads the result before the user's attributes, and passes activeMatch through without its own default.

The server-side router already carries the request URL, so the attributes are in the server HTML and hydration doesn't change them. Island pages have no Void Router and render Link without active state; the islands guide already says to use plain <a> there.

Docs

• Pages guide (docs/guide/pages-routing/overview.md): new "Active links" section with adapter examples and a matching table.
• API reference: activeMatch and the two attributes on each adapter's Link.
• void skill: a working rule pointing agents at the attributes instead of hand-written useRouter().path checks.

Test plan

• linkActiveAttributes unit tests: exact and prefix matching, /, whole segments, query and hash, letter case, trailing slashes, encoding, relative and absolute hrefs, other origins, non-GET links, no router
• React Link unit tests: server markup, prefix, overrides, no router
• Vue type check: activeMatch accepts only 'exact' | 'prefix'
• Shared browser contract, run against all four playgrounds in dev and preview (8/8): server HTML, state after hydration, and the nav updating across two SPA navigations. The playground layouts' Users link now uses activeMatch="prefix"
• vp run check: 33/33
• vp test run: 763/771 files passed under full load; the 7 failing files (Nuxt, SSR, TanStack Start, WebSocket playgrounds, a DB template test, a Sandbox runner test, a Cloudflare v2 test) all pass when rerun on their own

🤖 Generated with Claude Code

[cpojer]

Awesome!