Css Circle Menu

A fly-out circle menu built with CSS.
Alternatives To Css Circle Menu
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Hamburgers6,83831760a month ago20March 15, 202231mitSCSS
Tasty CSS-animated Hamburgers
12 years ago7July 14, 201922mitJavaScript
A light-weight, responsive, mobile-like navigation menu plugin
Css Circle Menu165
7 years agoApril 13, 20153CSS
A fly-out circle menu built with CSS.
2 years ago13May 25, 2021mitSCSS
The new era of mobile navigation for the web, we're out of hamburgers.
Delicious Hamburgers6512 months ago26February 03, 20221mitSCSS
Beautiful SASS powered hamburger menu buttons
Simply Nav22
2 years agomitCSS
Simple lightweight & fully responsive mobile navigation built with flexbox and vanilla JavaScript
Sass Radial Menu21
11 years ago
A simple sass+compass dynamic radial menu.
6 years ago4April 30, 2017mitJavaScript
A scaffolding tool for making desktop apps from websites.
Impromptu React Sidemenu14
6 years agootherJavaScript
:tropical_fish: A side menu component for React.
Sass Watcher10
12 years ago
An OS X service to watch SASS files, so you don't have to open the command line.
Alternatives To Css Circle Menu
Select To Compare

Alternative Project Comparisons

CSS Circle Fly-Out Navigation

My circular fly-out CSS navigation menu component, built with CSS3. View the demo here.

Circle fly out menu


To use, include the CSS and JavaScript in your app. Markup your menu like this:

<nav class="c-circle-menu js-menu">
  <button class="c-circle-menu__toggle js-menu-toggle">
  <ul class="c-circle-menu__items">
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="path/to/icon" alt="">
    <!-- more items here -->
  <div class="c-circle-menu__mask js-menu-mask"></div>

Then, include your script like this:

<script src="path/to/circleMenu.min.js"></script>

Finally, you can initialize the menu like this:

  var el = '.js-menu';
  var myMenu = cssCircleMenu(el);

The default number of menu items is 5. To use a different number of items, you'll have to configure and build with Sass and Gulp.

Out of the box usage

You can use this component out of the box by downloading the uncompressed or compressed files from the css/ directory.

Use as a Bower component

The component is available as a bower package, and you can import it by running the following command:

bower install css-circle-menu

Configuring and Building with Sass and Gulp

The component is built with Sass (SCSS) and uses a JavaScript module as well to handle events. Everything gets compiled and built with Gulp. To develop and compile from gulp, just run:

npm install

To watch files during development, run

gulp watch

Using the Gulp workflow is hugely beneficial, because it makes the component much easier to work with and customise. If you're not using Gulp to compile the Sass, you will still need to leverage Compass to make use of the math helper functions. The following 11 variables are configurable in the Sass up front, and their defaults are written out for you to look at:

// $menu-item-radius: 48px;                  [1]
// $num-items: 5;                            [2]
// $menu-theme-color: rgb(255, 40, 60);      [3]
// $spread-radius: 144px;                    [4]
// $delay-increment: 0.1s;                   [5]
// $menu-position: "bottom-right";           [6]
// $mq-height: 480px;                        [7]
// $mq-width: 480px;                         [8]
// $button-bar-height: 4px;                  [9]
// $button-bar-spacing: 4px;                 [10]
// $button-lr-padding: 10px;                 [11]

You can edit these as you see fit. Here's the breakdown of these 11 configuration options:

  1. Set up the initial menu item radius.
  2. Decalare how many items our menu will contain.
  3. Set up a theme colour.
  4. The spread radius, which is how far the menu items spread from the origin.
  5. The delay increment, which is how much delay there is between each menu item leaving from / returning to the origin.
  6. The position of the menu, chosen from one of four values: bottom-right - bottom right corner (this is the default) bottom-left - bottom left corner top-left - top left corner top-right - top right corner
  7. Minimum height at which menu increases size.
  8. Minimum width at which menu increases size.
  9. The height of a bar in the toggle button.
  10. The spacing between bars in the toggle button.
  11. The padding between the left and right of the toggle button container and the bars.

Other variables will have to be customised further down in the Sass with your own discretion. Be sure to change up the Sass variable that defines the number of navigation items.

License & Copyright

Licensed under the MIT license.

Copyright 2016, Call Me Nick.

Popular Menu Projects
Popular Sass Projects
Popular User Interface Components Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.