Collection of free HTML and CSS circle menu code examples from codepen and other resources. Update of April 2019 collection. 6 new items.

Related Articles

  1. CSS Menus
  2. CSS Dropdown Menus
  3. CSS Mobile Menus
  4. CSS Sidebar Menus
  5. CSS Horizontal Menus
  6. CSS Fullscreen Menus
  7. CSS Sliding Menus
  8. CSS Toggle Menus
  9. CSS Off-Canvas Menus

Author

  • Dan Benmore

Links

Made with

  • HTML / CSS

About a code

Circle Links

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS

About a code

The Circular Menu

Using border-radius and clipping paths to create a circular fan like menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Erin McKinney

Links

Made with

  • HTML / CSS

About the code

Circle Menu

Nice pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • 0guzhan

Links

Made with

  • HTML / CSS

About the code

Circle Menu

Pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Kostadin

Links

Made with

  • HTML / CSS (Stylus)

About the code

Circular Menu

Pure HTML and CSS circular menu. 0 JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Bennett Feely

Links

Made with

  • HTML / CSS (SCSS) / JS

About the code

Rings Navigation Concept

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kapilraj Parameswararajah

Links

Made with

  • HTML / CSS

About the code

Circular Menu Navigation

Pure CSS circular menu navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jasper LaChance

Links

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • sanjeev yadav

Links

Made with

  • HTML / CSS / JS

About the code

Circular NavBar

Inspired by Google Material Design and Circles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jamie Coulter

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Pure CSS 3D Radial Menu

Super radial menu hyper action.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Shyam Chen

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Circular Menu

Circular menu/navigation, hamburger, Material.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Mojtaba Seyedi

Links

Made with

  • HTML / CSS

About the code

Circular Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Hadar Weiss

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • web-tiki

Links

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andrew Myers

Links

Made with

  • HTML / CSS

About the code

Circular Menu

Pure CSS circular menu. Hover to show menu!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lucas Bebber

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Gooey Menu

Gooey menu with CSS and SVG filters.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Creative Punch

Links

Made with

  • HTML / CSS / JS

About the code

Animated Radial/Circular Menu

A radial menu made with CSS3 and JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: Circular Links Menu

Author

  • Rachel Smith

Links

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Circular Links Menu

Responsive circular links menu.

Demo image: Circular Navigation With CSS

Author

  • Sara Soueidan

Links

Made with

  • HTML
  • CSS
  • JavaScript (classie.js)

About the code

Circular Navigation With CSS

A tutorial on how to create a circular navigation using CSS transforms.

Author

  • Billy

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS "Spin-Out" Menu

Hover the menu and all of it's items flare out!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -