nav-router

API / Functions

isActive() function

Whether a route is on the current page’s path. A section stays active while any page under it shows, which is what a menu needs to mark where you are.

import { isActive } from 'nav-router'

Signature

isActive(target, args?): boolean

Parameters

targetstring | Routerequired

A route name or a Route. A section’s name means the section, not its index page.

argsobjectdefault null

Params and query the page must also have. Only the keys you pass are compared.

Returns

boolean

true when the route is on the committed page’s path and every key in args matches.

Compared with isCurrent()

isCurrent() asks whether a route is the page itself. On /team/acme/members:

CallisActiveisCurrent
('team')truefalse
('members')truetrue
('team', { org: 'acme' })truefalse
('team', { org: 'globex' })falsefalse
('settings')falsefalse

Set aria-current from it, so the active state is announced and you can style it from CSS.

import { href, isActive } from 'nav-router';

const link = (name, label) => `
  <a href="${href(name)}" ${isActive(name) ? 'aria-current="page"' : ''}>
    ${label}
  </a>`;
import { href, isActive } from 'nav-router';

const NavLink = ({ name, children }) => (
  <a
    href={href(name)}
    aria-current={isActive(name) ? 'page' : undefined}
  >
    {children}
  </a>
);
import { href, isActive } from 'nav-router';

const NavLink = (props) => (
  <a
    href={href(props.name)}
    aria-current={isActive(props.name) ? 'page' : undefined}
  >
    {props.children}
  </a>
);

It reads the committed page

During a navigation that hasn’t committed yet, isActive() still answers for the page on screen. To light the link being opened, read router.pending.

  • isCurrent(): the page itself, not its sections.
  • canAccess(): whether the user may open a route, for hiding links.
  • href(): the URL for a route.
Edit this pageUpdated Nov 5, 2026