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/public/components/Nav.css';

Props

Use any valid <nav> props.

Examples

Deep import.
import Nav from 'device-agnostic-ui/public/components/Nav.js';
Deep require.
const Nav = require('device-agnostic-ui/public/components/Nav');
Index import. Convenient, but technically inferior to a deep import.
import { Nav } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Nav } = require('device-agnostic-ui');
With internal Next.js route link (using the <LinkActive> component), and an external link.
import { LinkActive, LinkNav, Nav } from 'device-agnostic-ui';

const result = (
  <Nav>
    <LinkActive href="/" passHref>
      <LinkNav>Home</LinkNav>
    </LinkActive>
    <LinkNav href="https://github.com/jaydenseric/device-agnostic-ui">
      GitHub
    </LinkNav>
  </Nav>
);

Tags