Active links with NavLink in React Router

NavLink is a Link that knows whether it points to the current location, so menus and tabs can highlight the page you are on.

All React Router examples React Router: usage and stats

Active links with NavLink in React Router: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Use NavLink for menus. The tab bar renders NavLink instead of Link, because each tab needs to look different when it is the current page. [1]
Style the .active class. A small stylesheet created in code targets .tabs a.active. Home and Inbox get the purple pill only through that class. [1]
Use the isActive callbacks. The Drafts tab passes a function as children to swap ○ for ●, and the Settings tab passes a function to style that turns the text amber when isActive is true. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { MemoryRouter, Routes, Route, NavLink } from 'react-router-dom';

const css = `
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: #1f2937; }
.tabs a { padding: 8px 14px; border-radius: 8px; color: #cbd5e1; text-decoration: none; font: 600 14px system-ui; }
.tabs a.active { background: #6366f1; color: #fff; }
`;

function Page({ title }) {
  return <p style={{ color: '#e5e7eb', font: '16px system-ui', marginTop: 24 }}>You are on <b>{title}</b>.</p>;
}

export default function App() {
  return (
    <div style={{ height: 360, background: '#111', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
      <style>{css}</style>
      <MemoryRouter initialEntries={['/inbox']}>
        <nav className="tabs">
          {/* .active class from the stylesheet */}
          <NavLink to="/" end>Home</NavLink>
          <NavLink to="/inbox">Inbox</NavLink>
          {/* children callback */}
          <NavLink to="/drafts">
            {({ isActive }) => <span>{isActive ? '● ' : '○ '}Drafts</span>}
          </NavLink>
          {/* style callback */}
          <NavLink to="/settings" style={({ isActive }) => ({ color: isActive ? '#fbbf24' : '#94a3b8' })}>
            Settings
          </NavLink>
        </nav>
        <Routes>
          <Route path="/" element={<Page title="Home" />} />
          <Route path="inbox" element={<Page title="Inbox" />} />
          <Route path="drafts" element={<Page title="Drafts" />} />
          <Route path="settings" element={<Page title="Settings" />} />
        </Routes>
      </MemoryRouter>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Click each tab and watch the highlight move; the page starts on Inbox. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-router-dom 7.18.4, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More React Router examples

Basic routing in React Router Nested routes with Outlet in React Router URL params with useParams in React Router Programmatic navigation with useNavigate

Sources

Docs: start › declarative › navigating

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Router? Ask AgentGid →