---
title: "How to Add a Circle Menu in WordPress?"
url: https://nexterwp.com/docs/add-a-circle-menu-in-wordpress/
date: 2024-11-29
modified: 2026-08-18
author: "Aditya Sharma"
description: "A circle menu is a special and innovative way to present your menu. Instead of the usual list, your menu items are arranged in a circular shape, giving your design..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-a-Circle-Menu-in-WordPress_-1024x519.jpg
word_count: 745
---

# How to Add a Circle Menu in WordPress?

## Key Takeaways

- Nexter Blocks Circle Menu block creates a circle or straight toggle menu in WordPress, and it is a premium block that requires the PRO version of Nexter Blocks.
- Circle Menu block offers two menu layouts, Straight for a toggle vertical or horizontal menu and Circle for a toggle circle menu.
- Circle Menu block supports different link types for menu items, including URL, Email, Phone, and No Link, and it adds aria labels for accessibility.
- Circle Menu block includes styling and behavior controls such as Menu Between Gap (px), Menu Open Speed (ms), Icon Transition, Overlay Color, and Show Menu Scroll Offset.

A circle menu is a special and innovative way to present your menu. Instead of the usual list, your menu items are arranged in a circular shape, giving your design a fresh and modern feel.  

With the Circle Menu block from the Nexter Blocks, you can easily create a circle or straight toggle menu in WordPress.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-circle-menu/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a premium block; you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Circle Menu block is activated. To verify this, visit Nexter → Blocks → and search for Circle Menu and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=B2MFh9Pe03Q

## How to activate the Circle Menu Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and** turn**** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/11/Nexter-Blocks-Circle-Menu-Activation.png)

## Key Features

- **Two Menu Layout **- You can select from two menu layouts.

- **Different Link Type** - You can easily add different types of links like URL, phone and email to menu items.

- **Accessibility** - You can easily add aria label to your menu items.

## How to Use the Circle Menu Block in WordPress?

To use the Circle Menu block, add the block to the page.

### Circle Menu

From the **Layout** section, you have to select the menu layout. Here, you’ll find two options - 

- **Straight** - For creating a toggle vertical or horizontal menu.

- **Circle** - For creating a toggle circle menu.

Select the option that fits your requirements.

Let’s select Straight here.

From the **Menu Style** section, you can select a style.

Then, from the **Direction** section, you have to select the menu open direction.

In the **Menu List** section, you’ll find 4 menu items. Open an item.

From the **Icon Type** section, you can add an icon or image to the menu item.

In the **Title** field, you can add a title for the item in the backend.

From the **Select Link Type** section, you can select the link type. Here, you’ll find four options - 

- **URL** - For adding a normal URL.

- **Email** - For adding an email link. So users can email directly by clicking the link.

- **Phone** - For adding a phone link. So users can directly call by clicking the link. 

- **No Link** - For adding no links.

In the **Aria Label** field, you can add an Aria label to the item to improve accessibility for disabled users. 

Then, you can manage the icon color, background color and border color for normal and hover states.

By enabling the **Tooltip** toggle, you can add a tooltip title to the menu item.

You can repeat the same process to edit the remaining items.

To add more menu items, click on the **+ Add Menu** button.

### Toggle Icon

From the **Icon Type** section, you can add an icon or image to the menu toggle button.

You can select a menu style from the **Menu Style** section.

From the **Aria Label** field, you can add an Aria label to the toggle button to improve accessibility for disabled users.

### Icon Position

From the **Position **section, you can select the menu position. Here, you’ll find two options -

- **Absolute** - This will keep the toggle menu in the container.

- **Fixed** -  To create a fixed position toggle menu.

Then, you can adjust the menu position from the **Left (Auto/%)**, **Right (Auto/%)**, **Top (Auto/%)**, and **Bottom (Auto/%)** toggles.

### Extra Options

From the **Menu Between Gap (px)**, you can manage the menu item gap.

![](https://nexterwp.com/wp-content/uploads/2024/11/circle-menu-extra-options.png)

Then, from the **Menu Open Speed (ms)** section, you can manage the menu opening speed.

From the **Icon Transition** dropdown, you can select different transition effects.

## How to Style the Circle Menu Block?

To style the Circle Menu, you’ll find all the options under the Style tab.

**Icon **- From here, you can manage the menu item icon and image style.

![](https://nexterwp.com/wp-content/uploads/2024/11/circle-menu-style-tab.png)

.**Toggle Icon **- From here, you can manage the menu toggle icon and image style.

**Tooltip Options** - From here, you can manage the tooltip text style and visibility.

**Extra Options** - Here, you’ll find a couple of additional options.

- **Overlay Color** - From here, you can set an overlay background color when the menu opens.

- **Show Menu Scroll Offset** - From here, you can scroll top offset to show the menu when you scroll down to equivalent pixels.

Advanced options remain common for all our blocks, you can explore all the options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: Why is the Circle Menu block not showing in WordPress?**
A: The Circle Menu block only appears when the default WordPress Block editor is active, the Nexter Blocks plugin is installed and activated, and the PRO version is in place. It also has to be turned on under Nexter → Blocks by searching for Circle Menu and activating it. If any one of those pieces is missing, the block will not be available in the editor.

**Q: Can I use a circle menu instead of a normal list menu in WordPress?**
A: The Circle Menu block from Nexter Blocks is built for exactly that use case. It presents menu items in a circular shape instead of a standard list, which gives the layout a different visual rhythm. The block also supports a straight toggle menu, so it works for both circular and vertical or horizontal toggle-style navigation.

**Q: What link types can I add to Circle Menu items?**
A: Circle Menu items support four link types: URL, Email, Phone, and No Link. That matters because the menu is not limited to simple web links. Email and Phone let users contact you directly from the menu item, while No Link is useful when an item is only meant to act as a label or trigger.

**Q: How do I make the Circle Menu stay fixed on screen?**
A: The Position setting includes Fixed and Absolute. Fixed creates a toggle menu that stays in a fixed position, while Absolute keeps it inside the container. That choice affects how the menu behaves during scrolling, so Fixed is the option to use when you want the toggle to remain visible as users move down the page.

**Q: What should I change if my Circle Menu opens too slowly or too fast?**
A: The Extra Options section includes Menu Open Speed (ms), which controls how quickly the menu opens. That setting matters because animation speed changes how responsive the menu feels. The same section also includes Menu Between Gap (px) for spacing between items and Icon Transition for changing the transition effect, so you can tune both motion and layout together.

**Q: What are the main styling options for the Circle Menu block?**
A: The Style tab groups the visual controls for Icon, Toggle Icon, Tooltip Options, and Extra Options. You can set Overlay Color for the background that appears when the menu opens and Show Menu Scroll Offset to control when the menu appears after scrolling down a set number of pixels. For deeper styling controls, Nexter Blocks also points to its [Advanced tab tutorial](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/).