LinkNav

A navigation link to display in the Nav component.

It implements the <a> element.

It should be wrapped in the <LinkActive> component for an internal Next.js route link.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import "device-agnostic-ui/LinkNav.css";

Props

active

TypeBoolean (optional)
Defaultfalse

Does the link refer to the current page.

...props

Type…* (optional)

Additional props for the container; an <a> element.

Examples

How to import.
import LinkNav from "device-agnostic-ui/LinkNav.mjs";
With internal Next.js route links (using the <LinkActive> component).
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/LinkNav" passHref>
      <LinkNav>LinkNav</LinkNav>
    </LinkActive>
    <LinkActive href="/components/Nav" passHref>
      <LinkNav>Nav</LinkNav>
    </LinkActive>
  </Nav>
);