@opuscapita/react-responsive-navbar

OpusCapita responsive navbar

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
82Nov 2, 2019Dec 18, 2017Minified + gzip package size for @opuscapita/react-responsive-navbar in KB

Readme

react-responsive-navbar

Description

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

Installation

npm install @opuscapita/react-responsive-navbar

Demo

View the DEMO

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 name Type Default Description
id string 'responsive-navbar' Custom ID prefix
className string Custon className
activeKey number object
list array of object (name, href) required List of navbar items
showNavItemBorder boolean false show bottom-border below navbar items
showNavItemTooltip boolean true enables tooltips for nav items
tooltipDelay number 2000 delay before tooltip becomes visible
fontSize string 'inherit' override for fontSize
fontWeight string 'inherit' override for fontWeight
placeholder string 'more...' override for placeholder text
height string 40px override for height
height string 40px override for height
onSelect function Callback fired when the active item changes
componentLeft node Custom component aligned to left
componentRight node Custom component aligned to right

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);

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.