Collection of free HTML and CSS circle menu code examples.

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

  • 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

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