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
• Usage
  • Dropdowns
  • Options
  • Styling
  • Exclusion
• Credits
• Questions

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.

| Key | Value | | :------------ | :----------------------------------------------------------------------- | | gap | 30px 10% 10vw | | color | red #ff0000 #f00 rgb(255, 0, 0) hsl(0, 100%, 50%) | | hoverColor | blue #0000ff #00f rgb(0, 0, 255) hsl(240, 100%, 50%) | | textAlign | start center end | | textTransform | lowercase 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

• next.js
• react.js
• fs-file-tree

Questions

mreliwood on GitHub   |   [email protected]