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!

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

1. Pure CSS "Spin-out" Menu

CSS Circle Menus - 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

CSS Circle Menus - 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

CSS Circle Menus - 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

CSS Circle Menus - 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

CSS Circle Menus - 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

CSS Circle Menus - 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)

CSS Circle Menus - 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

CSS Circle Menus - 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)

CSS Circle Menus - 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

CSS Circle Menus - 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

CSS Circle Menus - 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

CSS Circle Menus - 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