react-expandable-nav
React component for twitch-like navbar layout.
This package is built upon Bootstrap.
Demo
http://ctan1345.github.io/react-expandable-nav/
Installation
npm install [--save] react-expandable-nav
Dependenecy
Bootstrap: http://getbootstrap.com/
jQuery (for tooltip function): http://jquery.com/
Usage
Basic
The simplest example requires you to wrap everything inside <ExpandableNavContainer>
and your contents inside <ExpandableNavPage>
.
You have to also define the element that is going to be rendered when the navbar expanded and not expanded.
var ExpandableNav = ; // Or var ExpandableNavContainer = ExpandableNav.ExpandableNavContainer; var ExpandableNavContainer ExpandableNavbar ExpandableNavHeader ExpandableNavMenu ExpandableNavMenuItem ExpandableNavPage ExpandableNavToggleButton = ExpandableNav; var App = React;
Advanced usage
You can substitute the default toggle button with your own:
<ExpandableNavToggleButton small=<span>open</span> full=<span>close</span>/>
You can control the width of the navbar by specifying fullWidth
and smallWidth
attribute on ExpandableNavbar
:
<ExpandableNavContainer> <ExpandableNavbar fullWidth=300 smallWidth=60> ... </ExpandableNavbar> </ExpandableNavContainer>
If you do that, you probably want to change the style as well. To do that, you can provide inline style.
var navPageStyle = full: paddingLeft: 200 small: paddingLeft: 30 ; var navHeaderStyle = full: paddingLeft: 10 small: paddingLeft: 5 ; <ExpandableNavContainer> <ExpandableNavbar> <ExpandableNavHeader small=headersmall full=headerfull fullStyle=navHeaderStylefull smallStyle=navHeaderStylesmall /> ... </ExpandableNavbar> <ExpandableNavPage fullStyle=navPageStylefull smallStyle=navPageStylesmall> ... </ExpandableNavPage> </ExpandableNavContainer>
Alternatively, you can specify the class and use CSS to set the style.
<ExpandableNavContainer> <ExpandableNavbar fullClass="full" smallClass="small"> ... </ExpandableNavbar> <ExpandableNavPage fullClass='full' smallClass='small'> ... </ExpandableNavPage> </ExpandableNavContainer>
You can control the initial active URL by providing active={true} attribute on <ExpandableNavMenuItem>
.
<ExpandableNavMenu> <ExpandableNavMenuItem small=menuItemssmall0 full=menuItemsfull0 url='/home/' /> <ExpandableNavMenuItem small=menuItemssmall1 full=menuItemsfull1 url='/about/' active=false /> // This element will have 'active' class when ExpandableNav is first rendered <ExpandableNavMenuItem small=menuItemssmall2 full=menuItemsfull2 url='/contact/' active=true /> </ExpandableNavMenu>
Tooltip
To use this function, you need to include jQuery and Bootstrap in your application.
Firstly you have to trigger the tooltip by calling $('[data-toggle="menuitem-tooltip"]').tooltip()
.
Then you have to provide jQuery dependency to ExpandableNavMenuItem
by passing jquery={$}
.
Assume jQuery is available globally, you can something like this:
var App = React;
Development
Run example
npm install npm start open localhost:3000
Watcher
grunt watch
Testing
grunt test