Installation

yarn add dotmenu

Or using npm

npm install dotmenu

Usage

First, import dotmenu using one of the following methods:

If you're using a bundler:

import { dotmenu } from 'dotmenu'

Otherwise, add this to your index.html:

<script src="https://rawgit.com/mattpjohnson/dotmenu/master/dist/dotmenu.umd.min.js"></script>

Now register your commands with dotmenu.

function exampleAction1() {
  console.log('Action 1')
}

function exampleAction2() {
  console.log('Action 2')
}

const group1 = new dotmenu.CommandGroup({ title: 'Example group 1' })
group1.registerCommand({ title: 'Action 1', run: exampleAction1 })
group1.registerCommand({ title: 'Action 2', run: exampleAction2 })
dotmenu.commandRegistry.registerCommandGroup(group1)

dotmenu.commandRegistry.useDotEventListener()

The majority of dotmenu commands are just shortcuts for clicking on something. There's a handy helper for this:

const group2 = new dotmenu.CommandGroup({ title: 'Example group 2' })
group2.registerCommand(
  dotmenu.DOMEventsCommand.createClickEventCommand({
    title: 'Click the button',
    element: '#click-this-button',
  })
)

License

MIT