10 Best Circle Menu Plugins In jQuery And Pure JavaScript/CSS

by jQueryScript,

What is circle menu:

A circle menu (also known as radial menu, round menu, circular menu) is a creative menu design concept that arranges the sub-menu items around a circle or arc style menu toggle button. 

In this post you will find the 10 best circle menus implemented in jQuery, vanilla JavaScript, and Pure CSS/CSS3 that helps developers create awesome site/app navigation for better user experience. Have fun!

Originally Published May 29 2019, updated Mar 17 2021

Table of contents:

jQuery Circle Menu Plugins:

Animated Circle Menu with jQuery and CSS3

A jQuery plugin that makes uses of CSS3 transitions and transforms to create an animated circle menu around the toggle button.

Animated Circle Menu with jQuery and CSS3

[Demo] [Download]


Radial/Pie Menu Control Built With jQuery And CSS3

An elegant radial menu control (aka. round menu, circle menu, pie menu) built with JavaScript (jQuery) and CSS & CSS3.

Radial/Pie Menu Control Built With jQuery And CSS3

[Demo] [Download]


Animated Dynamic Radial Menu Plugin For jQuery - CircleMenu

CircleMenu is a fancy jQuery navigation plugin to dynamically render a fancy radial menu where the users are able to switch between menu items with a rotation animation.

Animated Dynamic Radial Menu Plugin For jQuery - CircleMenu

[Demo] [Download]


CSS3 Animated Radial Menu With jQuery - circleNavigation

circleNavigation is a fancy jQuery/CSS3 based navigation script for generating a corner navigation toggle that will reveal a radial menu when clicked.

CSS3 Animated Radial Menu With jQuery - circleNavigation

[Demo] [Download]


Align Elements Into A Circle - jQuery Incircle

Incircle is a tiny jQuery plugin that positions a group of elements (e.g. an unordered html list) into a circle around the first item.

Align Elements Into A Circle - jQuery Incircle

[Demo] [Download]


Vanilla JS Circle Menu Plugins:

Radial Popup Menu With JavaScript And CSS3 – circleMenu

circleMenu is a simple, lightweight, dependency-free JavaScript library that helps you create a radial popup menu with a fullscreen overlay for your web applications.

Radial Popup Menu With JavaScript And CSS3 – circleMenu

[Demo] [Download]


Path-style Animated Radial Menu – BloomingMenu.js

BloomingMenu.js is a standalone JavaScript library intended to create a CSS3 animated radial menu as you seen on Path.com.

Path-style Animated Radial Menu – BloomingMenu.js

[Demo] [Download]


Pure CSS Circle Menus:

Radial Popup Menu In Pure CSS – Circle Menu

Yet another circle menu navigation concept to create a floating action button that reveals a radial popup menu when toggled.

Radial Popup Menu In Pure CSS – Circle Menu

[Demo] [Download]


Material Design Style Radial FAB Menu With Pure CSS

A Material Design inspired FAB (Floating Action Button ) menu that pops up a group of menu items around the trigger button. Without the need of JavaScript and any 3rd frameworks.

Material Design Style Radial FAB Menu With Pure CSS

[Demo] [Download]


Multi-level Radial Tree Menu In Pure CSS

A tree menu concept that expands the hamburger button into a multi-level radial menu. Written in pure CSS and nested HTML list.

Material Design Style Radial FAB Menu With Pure CSS

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome circle menus on the web & mobile? Check out the jQuery Circle Menu and JavaScript/CSS Circle Menu sections.

See also: