Nav

Description

The Nav & NavItem element can be used to quickly & easily create headers that update to show which page you are on.

If used in next.js, you can pass in next's Link from next/link into the Link property of NavItem. Otherwise, if you are just in plain react, skip this step.

Installation

npm i @jcomponents/nav

Demo

import Nav from '@jcomponents/nav';

<Nav>
    <Nav.Item href='/'>All</Nav.Item>
    <Nav.Item href='/header'>Header</Nav.Item>
    <Nav.Item href='/modal'>Modal</Nav.Item>
    <Nav.Item href='/button'>Button</Nav.Item>
    <Nav.Item href='/link'>Link</Nav.Item>
    <Nav.Item href='/nav'>Nav</Nav.Item>
    <Nav.Item href='/container'>Container</Nav.Item>
</Nav>

The rendered result is the header you see at the top of the page