How To Use The Circle Menu Widget By Atomic Addons

The Circle Menu widget by Atomic Addons shows one round toggle button. When a visitor points at it or clicks it, a set of round icon links fans out around it in the direction you choose, each with a tooltip naming it. You can keep the button in the page or fix it to a corner of the screen. This guide covers adding the widget, building the items and setting up the animation and tooltips.

Enable the Circle Menu Widget

Circle Menu is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Circle Menu. You can also open the Menu / Navigation category.

4. 4

   Turn the Circle Menu widget on.

5. 5

   Click Save Settings.

Add the Circle Menu Widget

Circle Menu works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Circle Menu. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Circle Menu

Open the widget and go to Content → Circle Menu:

1. 1

   Choose Toggle Icon: The icon on the toggle button: Plus (the default), Plus Circle, Close, Settings, Bars or Custom.

2. 2

   Custom Icon: With Custom only: any icon from the icon library or an SVG you upload.

3. 3

   Circle Menu Items: The round links that fan out. The list starts with five: Home, Products, Settings, Documentation and Contact Us. Click Add Item for another, or drag the items to reorder them.

Click an item to open its settings:

• Menu Title — the item's name. It is not printed on the circle: it shows in the item's tooltip and is read out by screen readers.
• Icon — the icon in the circle.
• Link — where the item goes: a page address, or a section ID with the # in front, such as #pricing. It is # by default.
• Custom Style — a pop-up with Color, Hover Color, Background and Hover Background for this one item, so each circle can have its own color.

Additional Settings

Content → Additional Settings places the toggle and chooses how it opens:

1. 1

   Toggle Icon Position: Default keeps the button in the page where you dropped the widget. Any other choice — Top Left, Top Center, Top Right, Center, Center Left, Center Right, Bottom Left, Bottom Center or Bottom Right — fixes it to that spot of the browser window, so it stays in view while visitors scroll.

2. 2

   Alignment: With the Default position only: left, center or right within the column.

3. 3

   Horizontal Offset / Vertical Offset: Moves the button from its place, from -500px to 500px, 0 by default. Use the device icon to set other values for tablets and phones.

4. 4

   Trigger: Hover (the default) opens the menu when the pointer reaches the toggle; Click opens and closes it with a click.

5. 5

   Show Tooltip: On by default: a tooltip on the toggle and on each item. Its settings are in the Tooltip Settings section.

Keyboard visitors can open the menu with Enter or Space on the toggle and close it with Escape.

Circle Menu Settings

Content → Circle Menu Settings shapes the fan of items:

1. 1

   Menu Direction: Where the items fan out from the toggle: Bottom-Right by default, or Top, Right, Bottom, Left, Full (a whole circle), Top-Left, Top-Right, Top-Half, Bottom-Left, Bottom-Half, Left-Half or Right-Half. Pick a direction that points away from the screen edge the button sits on.

2. 2

   Circle Menu Size: The diameter of each item, 20px to 50px, 35px by default.

3. 3

   Circle Menu Distance: How far the items move out from the toggle, 20px to 500px, 100px by default.

4. 4

   Speed: How long the items take to move out or back, in milliseconds: 500 by default.

5. 5

   Delay: How long the menu stays open after the pointer leaves it, in milliseconds: 1000 by default.

6. 6

   Step Out: The pause between one item and the next as they open, in milliseconds: 20 by default. A negative value opens them in reverse order.

7. 7

   Step In: The same for closing: -20 by default, which closes the last item first.

Tooltip Settings

With Show Tooltip on, Content → Tooltip Settings sets up the tooltips:

1. 1

   Tooltip Text: The tooltip on the toggle, “Click me to show menus” by default. Screen readers also use it as the toggle's name. Each item's tooltip shows its Menu Title.

2. 2

   Animation: How the tooltip appears: Shift-Toward (the default), Shift-Away, Fade, Scale or Perspective.

3. 3

   X Offset / Y Offset: Moves the tooltip along and away from the circle it belongs to.

4. 4

   Arrow: Adds a small arrow pointing at the circle.

5. 5

   Trigger on Click: Shows the tooltips on click instead of on hover.

Style the Circle Menu

Everything below is on the Style tab:

• Toggle Icon — the toggle's color, background, border, border radius, padding, shadow and Icon Size, with a Hover state. Transition sets the easing of the items' movement: Ease (the default), Linear, Ease-In, Ease-Out or Ease-In-Out.
• Circle Icon — the color, background, border, border radius, shadow and icon size of all the items, with a Hover state. An item's own Custom Style wins over these.
• Tooltip — shown while Show Tooltip is on: width, typography, text color and alignment, background, arrow color, padding, border, border radius and shadow.