navbar

Navbar component that moves the navbar items to a dropdown

Nov 03, 2018
Navbar component that moves the navbar items to a dropdown

react-responsive-navbar

Navbar component that moves the navbar items to a dropdown, if they do not fit in the content area.

View Demo Download Source

Installation

npm install @opuscapita/react-responsive-navbar

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.

API

Prop nameTypeDefaultDescription
activeKeynumberrequiredNavbar item to be active initially
listlist [{id: id, name: name, href: href}]required
showNavItemBorderbooleanfalseshow bottom-border below navbar items
showNavItemTooltipbooleantrueenables tooltips for nav items
tooltipDelaynumber2000delay before tooltip becomes visible
fontSizestring'inherit'override for fontSize
fontWeightstring'inherit'override for fontWeight
placeholderstring'more...'override for placeholder text
heightstring40pxoverride for height
FunctionParametersReturnsDescription
onSelecthref: stringCallback fired when the active item changes

Code example

import ResponsiveNavbar from '@opuscapita/react-responsive-navbar'; const ResponsiveNavbarView = (props) => { const list = [ { name: 'Item 1', href: '/item1' }, { name: 'Item 2', href: '/item2' }, ]; const activeKey = 2; return ( <ResponsiveNavbar activeKey={activeKey} list={list} onSelect={(href) => { props.router.push(href); }} /> ); }; export default withRouter(ResponsiveNavbarView);

GitHub

Recommended