Lightweight JavaScript Round Menu Library – radial.js

Category: Javascript , Menu & Navigation | July 11, 2018
Views Total:2,557 views
Official Page:Go to website
Last Update:July 11, 2018


Lightweight JavaScript Round Menu Library – radial.js


radial.js is a simple lightweight JavaScript library to create a radial menu from an array of items that appears around the toggle button when toggled.

How to use it:

Download and include the radial.js JS library on your html page.

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

Create an empty DIV container to place the round menu.

<div id="menu-demo"></div>

Create an array of items for the round menu.

var items = [
    {className: '', html: '...'},
    {className: '', html: '...'},
    {className: '', html: '...'}

Pass in the parameters to the round menu.

var options = {
    // True if the first element is a button
    button: false,
    // 360 degrees = circle
    deg: 360,
    // left to right = +180
    direction: 180,
    // Container dimensions
    container: {
      width: '100px',
      height: '100px'

Create new Radial object.

var radial = new Radial(items, options);

Append radial to the container.

var menu = document.getElementById('menu-demo');

On click on the button, toggle the round menu.

menu.addEventListener('click', function(){

Add custom CSS styles to the round menu.

#menu-demo {
  position: absolute;
  top: 20%;
  left: 20%;
  font-size: 19px;
#menu-demo .radial__item,
#menu-demo .radial__button {
  background: #2a7ae5;
  color: white;
  padding: 10px;
  border-radius: 50%;
#menu-demo .radial__button { cursor: pointer; }
#menu-demo .radial__item {
  z-index: -1;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
#menu-demo {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;



  • Added option for custom degrees

You Might Be Interested In:

Leave a Reply