https://github.com/appleple/multi-menu

JavaScript for multi level menu
https://github.com/appleple/multi-menu

npm vanilla-js vanillajs

Last synced: about 1 year ago
JSON representation

JavaScript for multi level menu

• Host: GitHub
• URL: https://github.com/appleple/multi-menu
• Owner: appleple
• License: mit
• Created: 2020-01-30T04:51:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T14:17:20.000Z (over 3 years ago)
• Last Synced: 2025-04-28T05:34:52.237Z (about 1 year ago)
• Topics: npm, vanilla-js, vanillajs
• Language: TypeScript
• Homepage: https://appleple.github.io/multi-menu/
• Size: 6.88 MB
• Stars: 22
• Watchers: 7
• Forks: 2
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# MultiMenu.js

## Install

use npm

```sh

$ npm install multi-menu --save

```

or from cdn

```html

```

## Usage

### basic usage

```js

import MultiMenu from 'multi-menu';

import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu');

```

### When you want to limit the ul level to apply js

```js

import MultiMenu from 'multi-menu';

import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu', {

  levelLimit: 2

});

```

### When you don't want to apply js to specific ul

```js

import MultiMenu from 'multi-menu';

import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu', {

  disableMenuClass: 'js-disable-menu'

});

```

```html



  
test

  


    
test

  



```


### When you want to prepend custom HTML on top of the ul

```js

import MultiMenu from 'multi-menu';

import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu', {

  prependHTML: (link) => `← Back 
${link.dataset.title}
`,

});

```


### When you want to show specific ul first

```html



  
test

  


    
test

  



```


## Demo

https://pensive-lovelace-a07c9a.netlify.com/