jQuery Script Blog

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

by jQueryScript,
circle menu

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 Feb 01 2024

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]

Material Inspired Radial Popup Menu With jQuery And CSS/CSS3

A stunning and user-friendly radial menu that pops up when the user clicks/taps on the trigger button. Inspired by Material Design and built using HTML/CSS/CSS3/jQuery. You can customize the placement of the menu to match your site's design and layout perfectly.

Material Inspired Radial Popup Menu With jQuery And CSS/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]

Creative SVG Radial Menu With jQuery And TweenMax

A creative SVG hamburger navigation system that reveals an animated radial menu when toggled.

Touch-enabled Circle Menu Plugin - jQuery circleMenu.js

[Demo] [Download]

Vanilla JS Circle Menu Plugins:

Interactive Wheel Menu With JavaScript And CSS

An interactive wheel menu system triggered by click/tap and hold. Written in pure JavaScript and CSS.

Interactive Wheel Menu With JavaScript And CSS

[Demo] [Download]

Rotating Circle Menu With JavaScript And CSS – Pentagon Menu

A Pentagon Popup Menu that arranges 5 menu items around a circle and displays them with a rotation effect when toggled.

Rotating Circle Menu With JavaScript And CSS – Pentagon Menu

[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:

Looking for more jQuery plugins or JavaScript libraries to create awesome circle menus on the web & mobile? See jQuery Circle Menu and JavaScript/CSS Circle Menu sections for more details.

See also: