Use active styles when aria-current is present

mantinedev · May 4, 2024 · 147a624 · 147a624
1 parent bd73170
commit 147a624
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/apps/mantine.dev/src/pages/core/nav-link.mdx b/apps/mantine.dev/src/pages/core/nav-link.mdx
@@ -10,7 +10,13 @@ export default Layout(MDX_DATA.NavLink);
 
 ## Active
 
-Set `active` prop to add active styles to `NavLink`. You can customize active styles with `color` and `variant` props:
+Set `active` prop to add active styles to `NavLink`.
+
+Note that if you're using a React Router or Remix `NavLink` inside `renderRoot`, the active styles will be based on the
+[`aria-current` attribute that's set by React Router](https://reactrouter.com/en/main/components/nav-link#aria-current)
+so you won't need to explicitly set the `active` prop.
+
+You can customize active styles with `color` and `variant` props:
 
 <Demo data={NavLinkDemos.active} />
 

diff --git a/packages/@mantine/core/src/components/NavLink/NavLink.module.css b/packages/@mantine/core/src/components/NavLink/NavLink.module.css
@@ -24,7 +24,7 @@
     pointer-events: none;
   }
 
-  &:where([data-active]) {
+  &:where([data-active], [aria-current='page']) {
     background-color: var(--nl-bg);
     color: var(--nl-color);