How to create a radial menu for your web app.

Radial Menu

A highly customizable radial menu that's very easy to setup.

See it live here - (Right click if you're on a desktop / touch and hold on smartphone)

About

Create a customized and beautiful radial menu for your web app that can be used as a standalone menu or override the default context menu. On a desktop or notebook click the second button of the mouse (context menu). On a smartphone or tablet, click the screen and hold for few seconds and the menu will pop.

Feel free to commit new styles and share them with the public.

Documentation

Let's create a new radial button so you can see how simple it is. You'll need to add the RadialMenu.js to your web app and then create a new menu. Let's look at the code:

<script src="RadialMenu.js"></script>

<script>
const radial = new RadialMenu();
</script>

That's it. The library has some default buttons included as example so you can see how it works. Let's continue reading the documentation so we can learn how to create our very own radial menu with our very own buttons.

To create a Radial Menu in your web app you'll need to pass a configuration object to the constructor. By default a lot of values are already seted, but you can fiddle with every single one of them.

const mySettings = {
    textColor: 'red', //define the color of the text on the buttons
    buttons: [
        {'text': '\uf053', 'action': ()=>{ history.go(-1) } }, //create a button that goes back on history
        {'text': '\uf054', 'action': ()=>{ history.go(1) } }, //create a button tha goes forward on history
    ]
};

const radial = new RadialMenu(mySettings);

Get the library, read the documentation and check out the code here