< All Topics

Circle Menu is a very creative widget which can be used to create bubble style menus on clicking or hovering. There are lots of styles and animations which can be used with the Circle Menu. This widget is very unique and can make your website standout.

Pro tip
Create a contact icon and add a circular menu widget to it showing the different ways to contact your company. This widget can also be used for social share.

How to use the Circle Menu Widget of The Plus Addons For Elementor

The Circle Menu widget comes with different styles and a plethora of customization options using which you can create stylish looking Menus for your websites.

Table Of Contents

General Steps

Search for the Circle Menu element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Circle Menu widget. First, click on the Content tab.

1. Content

Circle Menu

Set Icon Layout for Circle Menu widget.

Icon Layout 

Select the Icon Layout for the Circle Menu here. The options to choose are Circle and Straight.

Icon Direction

Select the Icon Direction for the Circle Menu here.

Menu List

Add item to the menu from here. You can add tooltip title, icon and URL. You can also set normal and hover background colors.

Toggle Icon

Select Icon 

Select the Icon, Custom Image using this option.

Icon Font

Select the font for the Menu icons.

Icon Library

Select the Icon from the Icon Library.

Menu Open Icon Style 

Set the Menu open Icon style here. You can select any one of the three styles provided.

Icon Position 

Position

Choose the Menu position here.

Left (Auto / %)

Enable and adjust the menu position from the left side.

Right (Auto / %)

Enable and adjust the menu position from the right side.

Top (Auto / %)

Enable and adjust the menu position from the top.

Bottom (Auto / %)

Enable and adjust the menu position from the bottom.

Extra Options

Adjust Circle Radius in Circle Menu widget.

Circle Radius 

Set the circle radius of the Menu here.

Icon Delay

Set Icon Delay here.

Menu Open Speed 

Set the Menu open Speed here.

Icon Step In

Set the Icon step in for the Circle Menu.

Icon Step Out

Set the Icon step out for the Circle Menu.

Icon Transition

Set the Icon Transition effect here.

Icon Trigger

Set the Icon Trigger effect here.

2. Style

The Style tab is used for customizing the appearance of all the Circle Menu widget components. Let’s understand each of these customization options.

Icon Style

Set the Icon style, Icon width, Image width, Icon border, Border radius, and Box Shadow here.

Toggle Icon Style

Set the Icon Size, Toggle Icon Width, Image Width, Circle Menu Border, Icon Color, Background Type, Border Radius and Box Shadow here.

Tooltip Text 

Enable and set the Typography, Text Color, Background Color, Box Shadow, Visibility Desktop, Visibility Tablet, and Visibility Mobile.

Extra Options

Enable and set the Show Menu Scroll Offset and Overlay color here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View On Scroll View Animation Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?