Nav

Displays navigation links in a horizontal, spaced and scrollable grid.

It implements the <nav> element.

The children should be <LinkNav> components, via the <LinkActive> component for internal Next.js route links.

Styles

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

Props

Use any valid <nav> props.

Examples

How to import.
import Nav from "device-agnostic-ui/Nav.mjs";
With internal Next.js route link (using the <LinkActive> component), and an external link.
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="/" passHref>
      <LinkNav>Home</LinkNav>
    </LinkActive>
    <LinkNav href="https://github.com/jaydenseric/device-agnostic-ui">
      GitHub
    </LinkNav>
  </Nav>
);

Tags