NavLink NavLink Active Styling
Last updated: 2026-11-02
NavLink NavLink Active Styling
NavLink is a Link that knows about the active state: when the current address matches its to prop, it automatically adds an active class name to the rendered a tag, or calls your className function with the current state. Navigation bars and sidebars use it to highlight the page the visitor is on, which takes far less code than comparing the location by hand every time.
| Group | Routing & State Mgmt |
|---|---|
| Kind | Component |
| Since | React Router 6.4 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { NavLink } from 'react-router-dom'
<NavLink
to="/about"
className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'
}>About</NavLink>
// Shorthand: adds class="active" by default on a match
<NavLink to="/about">About</NavLink>⚙️ Parameters
| to | The target path, e.g. /users/42; relative paths and the object form { pathname, search } work too. |
|---|---|
| className | Either a string or a ({ isActive }) => string function that returns a class name based on the active state. |
Returns：Nothing (it is a component). It renders a single a tag and carries the active styling while the current address matches to.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking an item turns it blue and bold and shows a check mark - the same effect as a real NavLink whose isActive drives the className function (simulated demo).💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
