Navbar component that moves the navbar items to a dropdown, if they do not fit in the content area.
npm install @normanandsons/react-responsive-tab-pills
View the DEMO
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
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.
- With webpack use resolve.mainFields to configure the module type.
- Add SASS loader to support importing of SASS styles.
| 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 |
| fontSize | string | 'inherit' | override for fontSize |
| fontWeight | string | 'inherit' | override for fontWeight |
| height | string | 40px | override for height |
| height | string | 40px | override for height |
| onSelect | function | Callback fired when the active item changes | |
| allowReorder | boolean | Allow drag and drop reorder | |
| onReorder | function | Callback fired when pills rearranged | |
| allowClose | boolean | Allow pills to be closable | |
| onClose | function | Callback fired when pills closed |
import ResponsiveTabPills from '@normanandsons/react-responsive-tab-pills';
const ResponsiveNavbarView = (props) => {
const list = [
{ name: 'Item 1', id: 0, href: '/settings' },
{ name: 'Item 2', id: 1, href: '/help' },
];
const activeKey = 1;
return (
<ResponsiveTabPills
activeKey={activeKey}
list={list}
onSelect={(id, index) => { props.router.push(list[index].href); }}
/>
);
};
export default withRouter(ResponsiveNavbarView);