NavLinkProps

Link props with pathname-aware rendering callbacks.

Compatibility

ReactAvailable in this renderer's browser integration.

React SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.

PreactAvailable in this renderer's browser integration.

Preact SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.

Import from @kasperrt/smolter/react @kasperrt/smolter/preact

Signature

interface NavLinkProps
  extends Omit<LinkProps, "className" | "children"> {
  end?: boolean;
  className?: string | ((state: NavLinkRenderProps) => string);
  children?: ReactNode | ((state: NavLinkRenderProps) => ReactNode);
}

Contract

Extends LinkProps, replacing className and children with either ordinary values or callbacks receiving NavLinkRenderProps. end enables exact pathname matching.

import type { NavLinkProps } from "@kasperrt/smolter/preact";

export const settingsLink: NavLinkProps = {
  to: "/settings",
  end: true,
  children: "Settings",
};

Usage and limits

Query strings and fragments do not affect active matching. NavLink adds aria-current="page" when active and forwards the remaining link behavior to Link.

Fields

end

end?: boolean;

className

className?: string | ((state: NavLinkRenderProps) => string);

children

children?: ReactNode | ((state: NavLinkRenderProps) => ReactNode);

View implementation ↗

smolter_