Signature

function NavLink({
  href,
  to = href ?? "/",
  end,
  className,
  children,
  ...props
}: NavLinkProps): ReactNode;

Parameters

Accepts LinkProps plus end, a className string or render callback, and children or a render callback. Both callbacks receive { isActive, isPending }. to takes precedence over href; the default destination is /.

Active matching

A link is active when its target pathname equals the current pathname. Without end, descendants also match at a slash boundary. The root pathname only matches itself. Query strings and hashes do not affect active matching.

Example

Use end for an exact section link. Active links receive aria-current="page" automatically.

import { NavLink } from "@kasperrt/smolter/preact";

export function Navigation() {
  return (
    <nav aria-label="Main">
      <NavLink to="/tasks" className={({ isActive }) => isActive ? "active" : ""}>
        Tasks
      </NavLink>
      <NavLink to="/settings" end>Settings</NavLink>
    </nav>
  );
}

Pending state and inherited behavior

isPending matches the pending navigation destination using the same pathname and end rules. Independent fetchers do not mark a navigation link pending. NavLink forwards link prefetching, reloadDocument, event handlers, and navigation options to Link. It does not create nested route matches.