Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kanety/stimulus-menu


https://github.com/kanety/stimulus-menu

Last synced: 2 months ago
JSON representation

Awesome Lists containing this project

README

        

# stimulus-menu

A stimulus controller for simple menu.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

$ npm install @kanety/stimulus-menu --save

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import MenuController from '@kanety/stimulus-menu';

const application = Application.start();
application.register('menu', MenuController);
```

Import css:

```css
@import '@kanety/stimulus-menu';
```

Build html as follows:

```html


```

You can also build vertical menu as follows:

```html


```

### Options

#### auto-open

Open menu by mouse hovering:

```javascript



```

#### keep-open

Keep menu opened after clicking menu items:

```javascript



```

#### toggle-element

You can change toggle element (default is `a`). For example:

```javascript


  • Button


```

### Callbacks

Set callbacks fired when a menu item is opened / closed:

```javascript
let element = document.querySelector('[data-controller="menu"]');
element.addEventListener('menu:opened', (e) => {
console.log('opened: ' + e.detail.item.querySelector('a').href);
});
element.addEventListener('menu:closed', (e) => {
console.log('closed: ' + e.detail.item.querySelector('a').href);
});
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).