Circle Menu

Circle Menu

Block Used
Circle Menu
Knowledge Required

Circle Menu is a very creative block that 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 block is very unique and can make your website stand out.

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

How to use the Circle Menu Block of The Plus Addons For Gutenberg

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

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Circle Menu into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Circle Menu after “/” sign, eg.“/Circle Menu”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Circle Menu


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

Menu Style

Select the menu style for the Straight Menu here.


Select the Icon Direction for the Circle Menu and Straight 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

Icon Type

Select the Icon, Custom Image using this option.

Select Icon

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Menu Open Style 

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

Icon 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

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 block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

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.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

4. Error 404 (Dynamic CSS)

In this tutorial, we have explained when this option will be needed.

View The Server Error Tutorial

Was this article helpful?
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?
Please submit the reason for your vote so that we can improve the article.