flap-nav
v1.2.3
Published
React responsive navigation menu component. The simplest configuration, easy to use.
Downloads
14
Maintainers
Readme
React Module Navigation System
React responsive navigation menu. The simplest configuration, easy to use.
With a JSON config file, build an HTML navigation menu for use in any React based website. No more editing HTML or nested jsx code when your navigation menu items change. Instead, edit the intuitive JSON config.
Benefits:
- Quickly make changes to the normalized, non-verbose JSON, focus on your content and not code syntax
- Because of the uniquely designed structure of the JSON config, adding/changing navigation menu items is intitive and faster than the tradional positional, parent-child stucture, which involves a tedious restructing of nodes. No other system is this simple and flexible.
- And no, ChatGPT will not come up with this! :)
- Fully responsive for all tablet and mobile device viewports
Functional Details
- Builds a Navigation Object Model (NOM) from the JSON config
- The Nom is an abstract tree built from the more intuitive, user friendly, JSON config
- The Nom tree is recursively walked and HTML code is produced
- Additional abstraction layer - leverage the NOM to extend this system to render a navigation menu for platforms other than web
Example JSON Config:
[
{
"nav": [], // empty nav structure denotes root link nav item (rather than a dropdown)
"title": "Home",
"href": "/"
},
{
"nav": [ // nav list, denotes respective number of levels of dropdowns
"weather",
"nyc weather"
],
"title": "10 day forecast", // title is the name of the final link with associated href
"href": "https://weather.com" // can be any valid href value
},
{
"nav": [
"weather",
"nyc weather",
"storm watch"
],
"title": "nyc storms",
"href": "/post/storms.html"
},
{
"nav": [
"food",
"cookies"
],
"title": "chocolate chip cookies",
"href": "/post/cookies.html"
}
{
"nav": [],
"title": "Contact",
"href": "/contact"
},
]
A picture is worth 1000 words, the above JSON will render as
And equivalent responsive mobile view
Installation
Install flap-nav
with your favorite package manager.
npm i flap-nav
Usage
flap-nav
exports a React component by default for easy JSX composition:
ES6-style usage:
import {FlapNav} from 'flap-nav';
const data = require('../data/data.json');
// or declare your data in your jsx directly
const navData = [
{
// ...
{
"nav": [
"weather",
"nyc weather"
],
"title": "10 day forecast",
"href": "https://weather.com"
},
// etc...
}
]
const Header = (props) => {
return (
<header id="header" className="flex stretch">
<div>
<FlapNav data={data} />
</div>
</header>
);
}
Demo
- see
flap-nav
in action at Freebird's blog site
For usage with React Native
import {NomBuilder} from 'flap-nav';
const data = require('../data/data.json');
// Abstract tree of your navigation model, iterate over to build iOS or Android menu systems, for example with React Native
// Or, for use with any Node app.
// See flapnav.js for a recursive pattern to iterate over your Nom and build your menu
const myNavNom = NomBuilder(data);