30 Great CSS Circle Menus - Free Code and Demos
Enjoy these 100% free HTML and CSS Circle Menu code examples. They are easy to add to your website. This list will provide all the code you need!
1. Pure CSS "Spin-out" Menu
Hover the menu and all of it's items flare out!
Author: Billy (billyysea)
Links: Source Code / Demo
Created on: February 21, 2013
Made with: HTML, SCSS, JS
Tags: ui, menu, hover, pure-css, scss
2. Circular Menu, Navigation, Hamburger, Material
Author: Shyam Chen (Shyam-Chen)
Links: Source Code / Demo
Created on: July 30, 2015
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: TypeScript
HTML Pre-processor: Pug
Tags: jade, stylus
3. CSS Circular Menu
Using border-radius and clipping paths to create a circular fan like menu Icons by Scott Dunlap
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: June 13, 2019
Made with: HTML, CSS, JS
Tags: circular, menu, fold-out, hand fan, fan menu
4. CSS Circular Menu Navigation
Author: Kapilraj Parameswararajah (Kapilnemo)
Links: Source Code / Demo
Created on: June 24, 2016
Made with: HTML, CSS
5. CSS Rings Navigation Concept
Links are absolutely positioned on top of each other making several rings.
Author: Bennett Feely (bennettfeely)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
6. Circular CSS NavBar
Inspired from google material design and Circles, created this hamburger style circular NAVBAR, ready to tag along on your website design.Comments and suggestion are welcome :)
Author: sanjeev yadav (alexakasanjeev)
Links: Source Code / Demo
Created on: February 5, 2016
Made with: HTML, CSS, JS
Tags: navbar, css, circle, material, html
7. Colourful Flower Popup Menu
This mobile inspired flower popup menu is a colourful fun project I'm experimenting with. Feel free to use it however you like.
Author: Jasper LaChance (jasperlachance)
Links: Source Code / Demo
Created on: March 12, 2016
Made with: HTML, CSS, JS
Tags: menu, popup, flower, animated, colourful
8. Pure CSS Circle Menu
Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.
Author: Hadar Weiss (hadarweiss)
Links: Source Code / Demo
Created on: June 16, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, menu, transition, transform, rotate
9. Warp Drive! A Pure CSS 3D Radial Menu
Super radial menu hyper action! Chrome only for the time being
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: November 10, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: ui, css, 3d, ux, menu
10. Circular Menu
Author: Mojtaba Seyedi (seyedi)
Links: Source Code / Demo
Created on: June 23, 2015
Made with: HTML, CSS
Tags: menu, share menu, css3, transition
11. Animated Radial / Circular Menu
A radial menu made with CSS3 and JavaScript
Author: Creative Punch (CreativePunch)
Links: Source Code / Demo
Created on: February 25, 2014
Made with: HTML, CSS, JS
Tags: css3, animated, menu, radial, circular
12. CSS Radial Menu
Hover the burger to expand radial menu. Only CSS with transitions and transfroms. The radial menu system is responsive according to the viewport height/width
Author: web-tiki (web-tiki)
Links: Source Code / Demo
Created on: March 18, 2015
Made with: HTML, CSS
Tags: menu, radial-menu, css, css3, transition
13. CSS Gooey Menu (Version 2)
Gooey menu with CSS and SVG filters. Version 2
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: January 25, 2015
Made with: HTML, SCSS
Tags: css, goo, effect, menu, filter
14. Circular Menu
Hover to reveal menu. Menu icon done using pseudo-border method mentioned in this post: http://css-tricks.com/three-line-menu-navicon/. Update 4/7/2015: Fix menu hiding when cursor is moved between items; adjust the line-height so the text is vertically centered.
Author: Andrew Myers (maskedcoder)
Links: Source Code / Demo, Css-tricks.com
Created on: March 27, 2014
Made with: HTML, CSS, JS
Tags: menu, animation, pure-css, circular-menu
15. Circular Menu
Circular menu. Only CSS.
Author: Mariano J. (didac)
Links: Source Code / Demo
Created on: May 26, 2017
Made with: HTML, CSS
Tags: circular-menu, circle-menu, css, nav
16. Gooey Menu
Gooey menu with CSS and SVG filters. Version 1
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: January 25, 2015
Made with: HTML, SCSS
Tags: goo, menu, css, svg, filter
17. Circular Menu
Author: Rahul Rai (rahul-rai-the-styleful)
Links: Source Code / Demo
Created on: July 25, 2019
Made with: HTML, CSS
Tags: menu, share menu, css3, transition
18. Circular Menu With Pure CSS
Just putting on CodePen something I've done months ago. Absolutely no images used for the menu. The only image used is the one for the background. Click the star to open the menu and anywhere else to close it. (Firefox has an issue with the :focus trick on the link - Thanks to Sara h...Read More
Author: Dennis (gevera)
Links: Source Code / Demo
Made with: HTML, CSS, JS
19. Circle Menu With CSS3 (Pure CSS Version)
Modified version of CSS3 Circle Menu to remove JS dependency. The menu is now 100% CSS & HTML Forked from SAMSURY SITES's Pen Circle Menu With CSS3.
Author: Paul Hawxby (phawxby)
Links: Source Code / Demo
Created on: May 2, 2014
Made with: HTML, SCSS, JS
Tags: menu, css3
20. Radial / Circular Menu Concept
Experimenting with radial menus. Inspired by the right-click-to-expand radial menus of Rust. Change the number of menu items in the bottom right to see how it works with a different number of menu items.
Author: Glenn McComb (lenymo)
Links: Source Code / Demo
Created on: June 20, 2017
Made with: HTML, SCSS, JS
Tags: menu, radial, circular, navigation, ui
21. CSS White Border Circle Menu
Circular menu. Hover over the button and see icon bubbles swirl out and orbit the main piece. On mouse out, they swirl back in. Excellent way to implement a list of links. Be aware that touch browsers may not implement a :hover event.
Author: Ildar Sagdejev (tknomad)
Links: Source Code / Demo
Created on: May 4, 2014
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css3, transition, animation, menu, hover
22. Pure CSS Circular Menu
Recreate of https://dribbble.com/shots/5419580-Add-Button-hover-animation
Author: Gabriel Antonio (Mareken)
Links: Source Code / Demo
Created on: April 13, 2019
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
23. Circular Menu
Circular menu. Only CSS.
Author: Mariano J. (didac)
Links: Source Code / Demo
Created on: May 26, 2017
Made with: HTML, CSS
Tags: circular-menu, circle-menu, css, nav
24. Simple Radial Menu
There is a bug with square backgrounds when you hovering buttons. Looks like it's a problem with this fancy hsla gradient background, but i don't wanna change it :)
Author: Nikolay Talanov (suez)
Links: Source Code / Demo
Created on: September 22, 2014
Made with: HTML, SCSS, JS
Tags: radial-menu, css-transitions
25. Radial Menu
Author: Carlos (bartoloxs)
Links: Source Code / Demo
Created on: July 29, 2014
Made with: HTML, SCSS, JS
Tags: radial, menu, transform, cool
26. Circular Navigation Concept
A new Navigation Concept
Author: Benedict (Chrisstar)
Links: Source Code / Demo
Created on: November 24, 2016
Made with: HTML, SCSS, JS
Tags: codevember, navigation, circle, concept
More Awesome Lists:
Share: