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.
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.
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.
Select the Icon Layout for the Circle Menu here. The options to choose from are Circle and Straight.
Select the menu style for the Straight Menu here.
Select the Icon Direction for the Circle Menu and Straight Menu here.
Add item to the menu from here. You can add tooltip title, icon and URL. You can also set normal and hover background colors.
Select the Icon, Custom Image using this option.
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.
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.
Set the circle radius of the Menu here.
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.
Set the Icon Transition effect here.
Set the Icon Trigger effect here.
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
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.
Enable and set the Typography, Text Color, Background Color, Box Shadow, Visibility Desktop, Visibility Tablet, and Visibility Mobile.
Enable and set the Show Menu Scroll Offset and Overlay color here.