30 CSS Circular Menus

Free Hand-picked 30 CSS Circular menus. Live demo available on each circular menu. All were developed using HTML, CSS, Some JS

↓

Author

Mojtaba Seyedi

Made with

HTML / CSS

Created on

June 23,2015

Updated on

February 20,2016

About the Code

Circular Menu

Useful Links:Live Demo | Download

Dependency:–

Animation:yes

↑ ↓

Author

Kostadin

Made with

HTML / Stylus

Created on

April 03,2017

Updated on

June 30,2017

About the Code

Circular menu

Pure CSS/html circular menu. 0 javascript.

Useful Links:Live Demo | Download

Dependency:Font Awesome

Animation:yes

↑ ↓

Author

Jamie Coulter

Made with

Haml / SCSS

Created on

November 10,2015

Updated on

December 18,2017

About the Code

Warp Drive! A pure CSS 3D Radial Menu

Super radial menu hyper action! Chrome only for the time being.

Useful Links:Live Demo | Download

Dependency:–

Responsive:no

Animation:yes

Compatible Browsers:Chrome

↑ ↓

Author

Andrew Myers

Made with

HTML / CSS

Created on

March 27,2014

Updated on

April 07,2015

About the Code

Circular Menu

Hover to reveal the menu.

Useful Links:Live Demo | Download

Dependency:–

Animation:yes

↑ ↓

Author

Mahmoud

Made with

HTML / CSS / JS

Created on

June 23,2016

Updated on

November 07,2017

About the Code

Floating Circular Menu

Useful Links:Live Demo | Download

Dependency:Font Awesome jquery.js

Animation:yes

↑ ↓

Author

Mark Boots

Made with

HTML / CSS / JS

Created on

February 17,2022

Updated on

February 18,2022

About the Code

cpc-days | events in circle

Useful Links:Live Demo | Download

Dependency:–

Responsive:yes

Animation:yes

↑ ↓

Author

Bennett Feely

Made with

HTML / SCSS / JS

Created on

February 08,2017

Updated on

December 08,2019

About the Code

Rings Navigation Concept

Links are absolutely positioned on top of each other making several rings.

Useful Links:Live Demo | Download

Dependency:–

Responsive:no

Animation:yes

↑ ↓

Author

Bennett Feely

Made with

Haml / SCSS / JS

Created on

August 27,2016

Updated on

August 29,2016

About the Code

Menu with mix-blend-mode buttons

Useful Links:Live Demo | Download

Dependency:jquery.js

Animation:yes

↑ ↓

Author

Dan Benmore

Made with

HTML / CSS

Created on

April 09,2020

Updated on

April 09,2020

About the Code

Circle links

Useful Links:Live Demo | Download

Dependency:–

Animation:yes

↑ ↓

Author

Pentama

Made with

HTML / CSS / JS

Created on

November 25,2019

Updated on

November 25,2019

About the Code

Pentama Pie Menu

A nice simple pie menu, responsive not supported, just for fun, hope you enjoy 🙂

Useful Links:Live Demo | Download

Dependency:normalize.css Font Awesome Bootstrap jquery.js bootstrap.js

Responsive:no

Animation:yes

↑ ↓

Author

Anders Schmidt Hansen

Made with

Slim / SCSS / CoffeeScript

Created on

February 27,2015

Updated on

February 28,2015

About the Code

Rosary Navigation (Concept)

By combining Hugo Giraudel’s “Items on a Circle” with David DeSandro’s “Dragabilly”, we can create a circular navigation, sorta like a rosary with beads on a string. Give it a go by dragging the circle above the rosary horizontally.

Useful Links:Live Demo | Download

Dependency:Font Awesome jquery.js draggabilly.js

Animation:yes

Compatible Browsers:Chrome & Firefox

↑ ↓

Author

Niels Van Limberghen

Made with

HTML / SCSS / JS

Created on

February 06,2014

Updated on

February 10,2014

About the Code

Circular navigation popout

Full circular animated navigation in CSS. Perfect for mobile. Based on codrops’s circular navigation.

Useful Links:Live Demo | Download

Dependency:jquery.min.js Font Awesome

Animation:yes

↑ ↓

Author

Mark

Made with

Pug / SCSS / JS

Created on

December 28,2018

Updated on

January 16,2019

About the Code

Circular Navigation Menu Selector

Circular Navigation Menu Selector. Easily editable to any number of points or any size radii and colors in HTML, CSS, and JS files.

Useful Links:Live Demo | Download

Dependency:–

Animation:yes

↑ ↓

Author

Benedict

Made with

HTML / SCSS / JS

Created on

November 24,2016

Updated on

November 25,2016

About the Code

Circular Navigation Concept

A new Navigation Concept.

Useful Links:Live Demo | Download

Dependency:jquery.min.js

Animation:yes

↑ ↓

Author

Xlee

Made with

HTML / SCSS / JS

Created on

September 30,2016

Updated on

October 04,2016

About the Code

practise-cv

Useful Links:Live Demo | Download

Dependency:–

↑ ↓

Author

deineko

Made with

Haml / CSS / JS

Created on

January 22,2016

Updated on

August 23,2016

About the Code

A circle menu concept

An experimental circle menu with jQuery and CSS.

Useful Links:Live Demo | Download

Dependency:jquery.min.js

Responsive:no

Animation:yes

↑ ↓

Author

Oliver Merz

Made with

HTML / CSS

Created on

May 13,2016

Updated on

May 19,2016

About the Code

Circle Menu

Useful Links:Live Demo | Download

Dependency:–

Responsive:yes

Animation:yes

↑ ↓

Demo image:https://codefronts.com/wp-content/uploads/2023/05/radial-menu-circles.png

Author

Robert

Made with

HTML / CSS

Created on

April 18,2017

Updated on

November 13,2017

About the Code

Radial Menu – Circles

Useful Links:Live Demo | Download

Dependency:–

Responsive:no

Animation:no

↑ ↓

Author

bengkel blogger

Made with

Haml / SCSS / JS

Created on

February 18,2016

Updated on

February 18,2016

About the Code

Circle Menu

Useful Links:Live Demo | Download

Dependency:jquery.min.js

Animation:yes

↑ ↓

Author

Ahad Birang

Made with

HTML / CSS / JS

Created on

January 14,2014

Updated on

June 19,2014

About the Code

Circular Menu using jquery

animated circular menu using jquery

Useful Links:Live Demo | Download

Dependency:jquery.min.js

Animation:yes

↑ ↓

Author

wontem

Made with

Pug / SCSS

Created on

October 05,2014

Updated on

October 06,2014

About the Code

Circle menu

Useful Links:Live Demo | Download

Dependency:–

Animation:yes

↑ ↓

Author

𝙰𝙽𝙳𝚈 𝚆𝙸𝙻𝙻𝙴𝙺𝙴𝙽𝚂

Made with

Pug / SCSS

Created on

October 14,2015

Updated on

October 15,2015

About the Code

Circle Menu Concept

A little menu that slides open to show some icons.

Useful Links:Live Demo | Download

Dependency:–

Animation:yes

↑ ↓

Author

Erin McKinney

Made with

HTML / CSS

Created on

February 06,2019

Updated on

October 03,2020

About the Code

Circle Menu

based on a YouTube video by WEBDEV titled Pure CSS Circle Menu.

Useful Links:Live Demo | Download

Dependency:Font Awesome

Responsive:no

Animation:yes

↑ ↓

Author

Justin

Made with

HTML / CSS / JS

Created on

May 19,2014

Updated on

May 20,2014

About the Code

Circular Navigation

Useful Links:Live Demo | Download

Dependency:–

Responsive:yes

Animation:yes

↑ ↓

Author

Willmer Barahona

Made with

HTML / SCSS / JS

Created on

February 23,2016

Updated on

May 24,2016

About the Code

Circle Menu

A nice menu effect that when clicked will pop items around and when clicked will animate the button to circle around and then change the background color to the one selected.

Useful Links:Live Demo | Download

Dependency:jquery.min.js

Responsive:no

Animation:yes

↑ ↓

Author

Alessandro Calvaresi

Made with

HTML / CSS / JS

Created on

October 01,2014

Updated on

October 01,2014

About the Code

Circular Nav

Just a quick test for circular navigation through sections.

Useful Links:Live Demo | Download

Dependency:jquery.min.js

Responsive:yes

Animation:yes

↑ ↓

Demo image:https://codefronts.com/wp-content/uploads/2023/05/responsive-circular-navigation.png

Author

raghu nandan

Made with

HTML / CSS

Created on

March 25,2016

Updated on

March 25,2016

About the Code

Responsive circular navigation

Useful Links:Live Demo | Download

Dependency:–

Responsive:yes

↑ ↓

Author

Jesús Castro

Made with

HTML / SCSS / JS

Created on

September 01,2017

Updated on

September 08,2017

About the Code

Circle Navigation

The experimental navigation menu for a technical website. Built with GreenSock Animation Platform and SVG.

Useful Links:Live Demo | Download

Dependency:jquery.min.js TweenMax.min.js

Responsive:yes

Animation:yes

↑ ↓

Author

tgrant54

Made with

HTML / SCSS / JS

Created on

December 11,2012

Updated on

December 14,2012

About the Code

Sweet Circle Menu

Animated Menu with css3 / javascript.
-webkit-/-moz- confirmed working.

Useful Links:Live Demo | Download

Dependency:jquery.js

Responsive:no

Animation:yes

↑

Author

Burak Can

Made with

HTML / CSS

Created on

December 26,2012

Updated on

September 15,2014

About the Code

Rotating Menu with Submenus

This is done only using CSS, there is no js. Implemented with radio inputs and :checked selector. edit: it is cross-browser now.

Useful Links:Live Demo | Download

Dependency:–

Responsive:no

Animation:yes

Related posts

Author

Made with

Created on

Updated on

About the Code

Circular Menu

Author

Made with

Created on

Updated on

About the Code

Circular menu

Author

Made with

Created on

Updated on

About the Code

Warp Drive! A pure CSS 3D Radial Menu

Author

Made with

Created on

Updated on

About the Code

Circular Menu

Author

Made with

Created on

Updated on

About the Code

Floating Circular Menu

Author

Made with

Created on

Updated on

About the Code

cpc-days | events in circle

Author

Made with

Created on

Updated on

About the Code

Rings Navigation Concept

Author

Made with

Created on

Updated on

About the Code

Menu with mix-blend-mode buttons

Author

Made with

Created on

Updated on

About the Code

Circle links

Author

Made with

Created on

Updated on

About the Code

Pentama Pie Menu

Author

Made with

Created on

Updated on

About the Code

Rosary Navigation (Concept)

Author

Made with

Created on

Updated on

About the Code

Circular navigation popout

Author

Made with

Created on

Updated on

About the Code

Circular Navigation Menu Selector

Author