React Navigation Bar
Can be used to create customizable navigation bar for your react project.
Examples:
Full size:
Mobile size
Installation
npm install --save react-nav-bar
Usage and options:
var reactNavBar = ;var NavBar = reactNavBarNavBar;var Menu = reactNavBarMenu; // Define your menu:// Menu can be any valid component form within react or objects with the listed properties.var menus = path:'menu1' label:'Menu 1' icon:'bell' <div>jsx element</div> path:'menu3' label:'Menu 3' icon:'bars' subMenus: path:'menu4' label:'Menu 4' path:'menu5' label:'Menu 5' subMenus: path:'menu6' label:'Menu 6' path:'menu7' label:'Menu 7' React path:'menu9' label:'Menu 9' path:'menu10' label: <div> You can do that too</div> icon:'bars' // Then use NavBar to place the menus where you want.<div className="menu"> <NavBar menus=menus theme='hoverLakeBright' location=thispropslocation /></div>
Options
NavBar and Menu have different options
NavBar
- location {Object} - react-router location object.
- menus {Array} - required - An array of instantiated menus .
- theme {String} - Name of the theme you want to use.
- spring {Object} - An object with details on how menus will open E.G:
spring={{ opened:100, closed:0, style: function(x) { return { height:
${x}%} } }}
- toggle {Object} - An object that determines how will the toggle button look
- openOnHover {Boolean} - Determines if menus will open or close on hover(for mobiles false is recommended).
// icons used are font-awesome icons so: use https://github.com/danawoodman/react-fontawesome for icons reference. toggle object example:
var toggle = display: false default: 'pied-piper' parent: opened: 'bars' closed: 'pied-piper' child: opened: 'bus' closed: 'coffee' ;
Menu
- path {String} - required - route to redirect on click.
- label {String|component} - what will be the menu's text Or component instead.
- active {Boolean|Function|Undefined|String} - Determines if the menu is active currently.
-
- If String or Undefined will check if that string is in pathname to determine if is active.
-
- If Boolean will do nothing and use the given value.
-
- If Function will invoke the function and assign the returned value to active.
- action {Function} - Will get invoked when a menu item is clicked and prevent default
- opened {Boolean} - Flag to indicate if submenu is opened or closed.
- permission {Function|Boolean} - determines whether or not to show this menu - can be use for access control.
-
- If Function Will invoke the function and assign the returned value to visible
-
- If Boolean will be assigned to visible
- subMenus {Array} - an array of submenus with the same signature.
- className {String} - class name to be used for that menu(in the li)
- icon {String} - specify an icon for menu.
Themes:
Using custom theme is very simple:
- copy one of the included themes
- change the selector theme name to your new theme E.G:
.hoverLakeBright_isOpened
to.YouThemeName_isOpened
- set theme option to your theme name
- include the theme file somewhere in your site
And your done.