Jose Tamu
January 10, 2025 /
Beginner

Circular Menu

How it works

Circular Menu contains a “Burger” and a “Content” element that is a nestable block element. You can put any elements at "Content" element, like you would do at a Breakdance div or section.

Content tab

Settings group

Custom toggle: menu’s toggle will be the Burger that comes with it by default but you can set your own here passed by it’s classname.

Animation group

From Top: determines where the circular menu will come from and go to at the vertical axis. You can use calc(100% – x) to make it come from right. The “x” would be the right value.
From Left: determines where the circular menu will come from and go to at the horizontal axis. You can use calc(100% – x) to make it come from bottom. The “x” would be the bottom value.
Duration
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.