Animated SVG Based Wheel Menu – wheelnav.js

Category: Javascript , Menu & Navigation , Recommended | April 21, 2020
Author: softwaretailoring
Views Total: 692 views
Official Page: Go to website
Last Update: April 21, 2020
License: MIT


Animated SVG Based Wheel Menu – wheelnav.js


wheelnav.js is a JavaScript library that lets you create animated, SVG based wheel navigation menus using Raphaël.js.

Basic usage:

Load the wheelnav.js and other required resources in the project.

<script src="js/required/raphael.min.js"></script> 
<script src="js/required/raphael.icons.js"></script>
<script src="js/dist/wheelnav.js"></script>

Create a container for the wheel navigation.

<div id="divWheelnav" class="demo"></div>

The JavaScript to create a basic wheel menu.

var myWheelnav = new wheelnav("divWheelnav");
      myWheelnav.slicePathFunction = slicePath().DonutSlice;
      myWheelnav.colors = new Array("mediumorchid", "royalblue", "darkorange");
      myWheelnav.createWheel([icon.github, icon.people,]);

You can also add navigation items using Html5 data-attributes.

<div id="divWheelnav" data-wheelnav 
    <div data-wheelnav-navitemicon="smile">smile</div>
    <div data-wheelnav-navitemicon="star">star</div>
    <div data-wheelnav-navitemicon="fork">fork</div>
    <div data-wheelnav-navitemicon="$">donate</div>
var myWheelnav = new wheelnav("divWheelnav");



  • Fixes href parser bug

v1.7.1 (07/12/2018)

  • Fix render issue with slicaAngle > 180
  • Reorganize navigateFunction
  • Fix broken links in README
  • New navItem property: titleRotateAngle
  • Fixed navigateFunction bug in navigateWheel

You Might Be Interested In:

Leave a Reply