# @opuscapita/react-responsive-navbar

> OpusCapita responsive navbar

Latest version **3.4.0** (published 2019-10-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @opuscapita/react-responsive-navbar
pnpm add @opuscapita/react-responsive-navbar
yarn add @opuscapita/react-responsive-navbar
bun add @opuscapita/react-responsive-navbar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.4.0 |
| Published | 2019-10-01 |
| First published | 2017-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.10.0 |
| Dependencies | 4 |
| Unpacked size | 13 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | OpusCapita |
| Maintainers | adam-dziomdziora-cybercom, alexanderdanilov, alexeysergeev, amourzenkov-sc, bo-kh, dmitriy.sanko, dmitrydivin, dsanko, egor.stambakio, elefantino, eriihine, gr4per, havantkim, ilkkalehtinen, janek.bug, jenni, jluukka, kaputse, kirillvolkovich, kwierchris, lukaszkepa, naniantero, nczeranka, nkovalenko-sc, ocmachineuser, pdetmer, samikarj, tamkov-sc, zjuice |

## Links

- npm: https://www.npmjs.com/package/@opuscapita/react-responsive-navbar
- Repository: https://github.com/OpusCapita/react-responsive-navbar
- Homepage: https://github.com/OpusCapita/react-responsive-navbar#readme
- Issues: https://github.com/OpusCapita/react-responsive-navbar/issues
- npm.io page: https://npm.io/package/@opuscapita/react-responsive-navbar

## Dependencies (4)

- [debounce](https://npm.io/package/debounce.md) 1.2.0
- [react-icons](https://npm.io/package/react-icons.md) 2.2.7
- [@opuscapita/oc-cm-common-styles](https://npm.io/package/@opuscapita/oc-cm-common-styles.md) 3.0.0
- [@opuscapita/react-floating-select](https://npm.io/package/@opuscapita/react-floating-select.md) 4.0.0

## Recent versions

- 3.4.0 (latest) — 2019-10-01
- 3.3.4 — 2019-09-03
- 3.3.3 — 2019-08-22
- 3.3.2 — 2019-01-30
- 3.3.1 — 2019-01-30
- 3.3.0 — 2019-01-14
- 3.2.2 — 2018-12-13
- 3.2.1 — 2018-12-13
- 3.1.8 — 2018-11-13
- 3.1.7 — 2018-10-17
- 3.1.6 — 2018-06-14
- 3.0.6 — 2018-05-18
- 3.0.5 — 2018-05-17
- 3.0.4 — 2018-04-11
- 3.0.3 — 2018-04-10
- … 12 more at https://npm.io/package/@opuscapita/react-responsive-navbar/versions

## 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](https://opuscapita.github.io/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.
* With webpack use [resolve.mainFields](https://webpack.js.org/configuration/resolve/#resolve-mainfields) to configure the module type.
* Add [SASS loader](https://github.com/webpack-contrib/sass-loader) to support importing of SASS styles.

### API
| Prop name          | Type                         | Default             | Description                                 |
| ------------------ | ---------------------------- | ------------------- | ------------------------------------------- |
| id                 | string                       | 'responsive-navbar' | Custom ID prefix                            |
| className          | string                       |                     | Custon className                            |
| activeKey          | number || object             | required            | Navbar item to be active initially          |
| 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
```jsx
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);
```

---
_Source: https://npm.io/package/@opuscapita/react-responsive-navbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._