Skip to content

feat(router): support inactive_class in Link #5410

Open
nerjs wants to merge 1 commit intoDioxusLabs:mainfrom
nerjs:feat/5318_inactive-link-class
Open

feat(router): support inactive_class in Link #5410
nerjs wants to merge 1 commit intoDioxusLabs:mainfrom
nerjs:feat/5318_inactive-link-class

Conversation

@nerjs
Copy link
Contributor

@nerjs nerjs commented Mar 24, 2026

Summary

Add inactive_class support to the Link component.

Changes

  • Introduce inactive_class prop to LinkProps
  • Apply inactive_class when the target route is not active
  • Preserve existing behavior for active_class
  • Update documentation to clarify class merging behavior

Motivation

When using utility-first CSS (e.g. Tailwind), classes often have equal specificity, so relying on override order can lead to unexpected results.
Providing inactive_class enables explicit, mutually exclusive styling for active and inactive states without depending on CSS cascade.

Tests

  • Add Playwright test covering:
    • correct SSR class assignment
    • correct class updates after SPA navigation

Fixes #5318

- add inactive_class prop
- append it when route is not active

- add playwright test for SSR and SPA class switching
@nerjs nerjs requested a review from a team as a code owner March 24, 2026 23:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Link component: active_class is sometimes not applied (tailwind)

1 participant