1.0.4 • Published 10 months ago

next-nav v1.0.4

Weekly downloads
-
License
ISC
Repository
github
Last release
10 months ago

next-nav

Description

Add a modern navbar to your next.js app automatically based on your routes.

Note Only the app directory structure of next.js is currenlty supported. This will NOT work with the pages directory.

Table of Contents

Installation

npm install next-nav

Usage

import Nav from 'next-nav';

export default function Home() {
	return (
		<main>
			<Nav />
		</main>
	);
}
  1. Import the Nav component from next-nav.
  2. Place Nav anywhere inside a React functional component.
  3. Your folders (routes) will automatically be added to the Nav component.

Example


If your file structure looks like this:

your-project
  ├─ app
  │  ├─ about
  │  ├─ contact
  │  ├─ products
  │  ├─ globals.css
  │  ├─ layout.jsx
  │  ├─ page.module.css
  │  └─ page.jsx
  │
  ├─ node_modules
  ├─ .gitignore
  ├─ next.config.js
  ├─ package-lock.json
  ├─ package.json
  └─ README.md

Nav will render this:

<nav class="nav">
	<p>Home</p>
	<p>About</p>
	<p>Products</p>
	<p>Contact</p>
</nav>

Dropdown Menus

Nested folders are automatically rendered as sub menus (dropdowns).

Example


If your file structure looks like this:

app
  ├─ about
  ├─ contact
  ├─ products
  │  ├─ soap
  │  ├─ candles
  │  └─ art
  │
  ├─ globals.css
  ├─ layout.tsx
  ├─ page.module.css
  └─ page.tsx

Nav will render this:

<nav class="nav">
	<p>Home</p>
	<p>About</p>
	<p>Contact</p>
	<div>
		<p>
			Products
			<svg width="10" height="10">
				<polyline points="1,4 5,9 9,4" />
			</svg>
		</p>

		<p>Soap</p>
		<p>Candles</p>
		<p>Art</p>
	</div>
</nav>

Options

The Nav component accepts a single 'options' prop that expects an object.

import Nav from 'next-nav';

export default function Home() {
	const options = {
		style: {
			color: 'lightblue'
		}
	};

	return (
		<main>
			<Nav options={options} />
		</main>
	);
}

The options object accepts two parameters, style and exclude.

Styling

The style parameter is an object that allows you to customize the appearance of the Nav component with any of the following options.

KeyValue
gap30px 10% 10vw
colorred #ff0000 #f00 rgb(255, 0, 0) hsl(0, 100%, 50%)
hoverColorblue #0000ff #00f rgb(0, 0, 255) hsl(240, 100%, 50%)
textAlignstart center end
textTransformlowercase uppercase capitalize

Inheritance

There is some default styling applied to the Nav component however most of the text style will be inherited from your existing styling. This is why there are no options to customize the font.

Exclusion

The exclude parameter is an array that allows you to specify routes you don't want in your navigation.

const options = {
    exclude: ['home', 'products'];
}

To exclude a subnav (dropdown) item, you must include the parent route followed by a slash, as it would appear in the url.

const options = {
    exclude: ['products/candles'];
}

Example


If your file structure looks like this:

app
  ├─ about
  ├─ contact
  ├─ products
  │  ├─ soap
  │  ├─ candles
  │  └─ art
  │
  ├─ globals.css
  ├─ layout.tsx
  ├─ page.module.css
  └─ page.tsx

and your options look like this:

const options = {
	style: {
		textTransform: 'uppercase'
	},

	exclude: ['home', 'products']
};

return (
	<main>
		<Nav options={options} />
	</main>
);

Nav will render this:

<nav class="nav options">
	<p>ABOUT</p>
	<p>CONTACT</p>
</nav>

Contributing

Questions

mreliwood on GitHub   |   contact.eliwood@gmail.com

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago