LinkNav

A navigation link to display in the Nav component.

It implements the <a> element.

It should be wrapped in the <LinkNav> 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/public/components/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

Deep import.

import LinkNav from 'device-agnostic-ui/public/components/LinkNav.js';

Deep require.

const LinkNav = require('device-agnostic-ui/public/components/LinkNav.js');

Index import. Convenient, but technically inferior to a deep import.

import { LinkNav } from 'device-agnostic-ui';

Index require. Convenient, but technically inferior to a deep require.

const { LinkNav } = require('device-agnostic-ui');

With internal Next.js route links (using the <LinkActive> component).

import { LinkActive, LinkNav, Nav } from 'device-agnostic-ui';

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