Collection of free HTML and CSS circle menu code examples.

  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

Creator

  • Kostadin

Programming language

  • HTML / CSS (Stylus)

Information the code

Circular Menu

Pure HTML and CSS circular menu. 0 JavaScript.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Bennett Feely

Programming language

  • HTML / CSS (SCSS) / JS

Information the code

Rings Navigation Concept

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Kapilraj Parameswararajah

Programming language

  • HTML / CSS

Information the code

Circular Menu Navigation

Pure CSS circular menu navigation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jasper LaChance

Programming language

  • HTML / CSS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • sanjeev yadav

Programming language

  • HTML / CSS / JS

Information the code

Circular NavBar

Inspired by Google Material Design and Circles.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Jamie Coulter

Programming language

  • HTML (Haml) / CSS (SCSS)

Information the code

Pure CSS 3D Radial Menu

Super radial menu hyper action.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Shyam Chen

Programming language

  • HTML (Pug) / CSS (Stylus)

Information the code

Circular Menu

Circular menu/navigation, hamburger, Material.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Mojtaba Seyedi

Programming language

  • HTML / CSS

Information the code

Circular Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Hadar Weiss

Programming language

  • HTML (Haml) / CSS (SCSS)

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • web-tiki

Programming language

  • HTML / CSS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Andrew Myers

Programming language

  • HTML / CSS

Information the code

Circular Menu

Pure CSS circular menu. Hover to show menu!

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Lucas Bebber

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Gooey Menu

Gooey menu with CSS and SVG filters.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Creative Punch

Programming language

  • HTML / CSS / JS

Information the code

Animated Radial/Circular Menu

A radial menu made with CSS3 and JavaScript.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Billy

Programming language

  • HTML / CSS (SCSS)

Information the code

Pure CSS “Spin-Out” Menu

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: