# menu-breaker

> Break HTML menu on resize

Latest version **2.2.1** (published 2020-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install menu-breaker
pnpm add menu-breaker
yarn add menu-breaker
bun add menu-breaker
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2020-01-26 |
| First published | 2018-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 35.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Jakub Biesiada |
| Maintainers | jbiesiada |
| Keywords | JavaScript, jQuery, menu, switch, responsive, mobile |

## Links

- npm: https://www.npmjs.com/package/menu-breaker
- Repository: https://github.com/JB1905/menu-breaker.js
- Homepage: https://github.com/JB1905/menu-breaker.js#readme
- Issues: https://github.com/JB1905/menu-breaker.js/issues
- npm.io page: https://npm.io/package/menu-breaker

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 2.2.1 (latest) — 2020-01-26
- 1.1.6 (1-1-x) — 2019-04-12
- 2.0.0-beta.1 (next) — 2019-02-23
- 1.1.5-beta.1 (beta) — 2018-12-10
- 2.0.2 — 2019-06-21
- 1.1.5 — 2019-04-12
- 2.0.1 — 2019-03-21
- 2.0.0 — 2019-03-05
- 1.1.4 — 2018-11-11
- 1.1.3 — 2018-11-10
- 1.1.2 — 2018-10-21
- 1.1.1 — 2018-09-06
- 1.1.1-beta.1 — 2018-09-02
- 1.1.0 — 2018-07-19
- 1.1.0-rc.1 — 2018-07-18
- … 3 more at https://npm.io/package/menu-breaker/versions

## README

# [menu-breaker.js](https://github.com/jb1905/menu-breaker.js)

[![NPM version](http://img.shields.io/npm/v/menu-breaker.svg?style=flat-square)](https://www.npmjs.com/package/menu-breaker)
[![NPM downloads](http://img.shields.io/npm/dm/menu-breaker.svg?style=flat-square)](https://www.npmjs.com/package/menu-breaker)

## About

### Demo
**[See plugin in action](https://jb1905.github.io/menu-breaker.js/)**

## How to Install
First, install the library in your project by npm:
```sh
$ npm install menu-breaker
```

Or Yarn:
```sh
$ yarn add menu-breaker
```

**You can also connect script via one of CDNs:**<br>
bundle.run: `https://bundle.run/menu-breaker`<br>
jsDelivr: `https://cdn.jsdelivr.net/npm/menu-breaker/`<br>
unpkg: `https://unpkg.com/menu-breaker/`

## Getting Started
**Connect libary with project using script tag in HTML:**
```html
<script src="/path/to/menu-breaker.js"></script>
```

**ES6 import:**
```js
import MenuBreaker from 'menu-breaker';
```

**Or CommonJS:**
```js
const MenuBreaker = require('menu-breaker');
```

Next use library with:

**&bull; Vanilla JavaScript e.g:**
```js
const elem = document.querySelector('.desktop');

const menuBreaker = new MenuBreaker({
  element: elem,
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});
```

**&bull; or jQuery e.g:**

*Connect jQuery in HTML*
```html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
```

*or include via command line and CommonJS*
```sh
$ npm install jquery
$ yarn add jquery
$ bower install jquery
```

```js
const jQuery = require('jquery');
```

*and call plugin on element*
```js
$('.desktop').menuBreaker({
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});
```

## Options
### Settings
Name | Type | Default | Description | Available options
-|-|-|-|-
**navbar-height** | number | `70` | Desktop menu height | e.g: `50`, `86`, etc.
**open-class** | string | `open` | Name of the class added to the mobile menu after clicking `open` or `open-close` element | Name of class

### Callbacks
Name | Description | Available options
-|-|-
**onInit** | Callback on plugin init | `() => { /* code */ }`
**onMenuOpen** | Callback on mobile menu open | `() => { /* code */ }`
**onMenuClose** | Callback on mobile menu close | `() => { /* code */ }`
**isMobile** | Callback when is mobile menu | `() => { /* code */ }`
**isDesktop** | Callback when is desktop menu | `() => { /* code */ }`

## License
This project is licensed under the MIT License © 2018-present Jakub Biesiada

---
_Source: https://npm.io/package/menu-breaker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._