LinkActive

A Next.js route link that puts an active boolean prop on the child if the link matches the current route path.

It implements the Next.js <Link> component.

Props

Use any valid <Link> props.

Examples

How to import.
import LinkActive from "device-agnostic-ui/LinkActive.mjs";
With the <LinkNav> and <Nav> components.
import LinkActive from "device-agnostic-ui/LinkActive.mjs";
import LinkNav from "device-agnostic-ui/LinkNav.mjs";
import Nav from "device-agnostic-ui/Nav.mjs";

const result = (
  <Nav>
    <LinkActive href="/components/LinkActive" passHref>
      <LinkNav>LinkActive</LinkNav>
    </LinkActive>
    <LinkActive href="/components/LinkNav" passHref>
      <LinkNav>LinkNav</LinkNav>
    </LinkActive>
  </Nav>
);