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.js');

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