Collection of free HTML and CSS circle menu code examples.

14 CSS Circle Menus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

back to top