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`

Type	Boolean (optional)
Default	`false`

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>
);