From da4139fb4cb2f56030b1843a8fa65c75fb6e3fc8 Mon Sep 17 00:00:00 2001 From: Cory Deppen Date: Sat, 11 May 2024 11:42:22 -0400 Subject: [PATCH] [@mantine/core] NavLink: Add react-router support to display active route (#6180) --- apps/mantine.dev/src/pages/core/nav-link.mdx | 8 +++++++- .../core/src/components/NavLink/NavLink.module.css | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/mantine.dev/src/pages/core/nav-link.mdx b/apps/mantine.dev/src/pages/core/nav-link.mdx index 5c6f45b5d97..8ed388c6859 100644 --- 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: diff --git a/packages/@mantine/core/src/components/NavLink/NavLink.module.css b/packages/@mantine/core/src/components/NavLink/NavLink.module.css index a8d81ef6bec..0f16662b559 100644 --- 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);