--- title: "How to Create a Circle Menu in WordPress?" url: https://nexterwp.com/docs/create-a-circle-menu-in-wordpress/ date: 2024-11-29 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "The circular fan-out is the shape people recognise from a floating action button — one button that blooms into its options and folds away again. That is the Circle layout,..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Create-a-Circle-Menu-in-WordPress_-1024x519.jpg word_count: 615 --- # How to Create a Circle Menu in WordPress? ## Key Takeaways - Nexter Blocks Pro activa el bloque Circle Menu, y se habilita en Nexter > Blocks dentro del panel de WordPress. - Circle Menu usa el diseño Circle, con Direction para elegir el cuarto del arco y Circle Radius para fijar la distancia en píxeles desde el botón de alternancia. - Circle Radius muestra valores separados para tablet y mobile, con retroceso al tamaño superior, y en una página publicada 150 coloca cuatro elementos a 150px y 300 duplica exactamente esa distancia. - Angle Start y Angle End no funcionan cuando Direction está en None, así que el menú vuelve al cuarto de círculo predeterminado; la post recomienda usar uno de los ocho presets de Direction. The circular fan-out is the shape people recognise from a floating action button — one button that blooms into its options and folds away again. That is the Circle layout, and the arc it draws is controlled by two settings: the direction it opens in and how far out the items sit. *For every Circle Menu setting in one place, see the [Circle Menu feature guide](https://nexterwp.com/docs/add-a-circle-menu-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-circle-menu/) ## Before You Start - **Edition:** **Pro** — the Circle Menu block needs Nexter Blocks Pro.- **Block to enable:** Circle Menu, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Steps - Add the **Circle Menu** block and set **Layout** to **Circle**. - Choose the **Direction** the arc should open towards. - Add your links in the **Menu List**. ![The menu list for a circle menu](https://nexterwp.com/wp-content/uploads/2024/11/circle-menu-layout-circle-new-1.webp) - Open **Extra Options** and set the **Circle Radius**. - Tune the timings there too — Icon Delay, Menu Open Speed, Icon Step In and Icon Step Out. - Pick an **Icon Transition** for the easing of the fan-out. ![A published circle menu fanned open on hover](https://nexterwp.com/wp-content/uploads/2026/09/cm-fe-hover-open.webp) > ***Circle Radius** is a plain pixel distance from the toggle button. Measured on a published page: at 150 the four items sat 150px out along the arc, and at 300 every distance doubled exactly.* ## How It Behaves - The items sit on an arc around the toggle at the distance you set — measured, four items at radius 150 landed 150px out and at radius 300 every distance doubled exactly.- **Direction decides which quarter the arc occupies.** Measured: bottom-right placed the items down and to the right of the toggle, top-left mirrored them up and to the left.- **Circle Radius has separate tablet and mobile values**, each falling back to the size above it — useful because an arc that fits a desktop can run off a phone screen.- Icon Delay, Menu Open Speed and the two Icon Step settings control the timing and the small in-and-out movement of each item as the menu opens.- The open and close behaviour does not preview inside the block editor — the editor says so on the control itself. Save and view the page to see it work. ## Limitations - **Angle Start and Angle End do not work.** They appear when Direction is set to None, but measured on a published page they never reach the front end — the menu falls back to the same quarter-circle as the default, whatever you set. Use one of the eight Direction presets instead. This is a known bug and has been reported to the development team.- The arc occupies the quarter implied by the Direction preset — a full circle or a custom sweep is not currently available, since the angle fields do not work.- Items are evenly spaced along the arc; individual items cannot be nudged.- Long titles belong in the tooltip rather than on the item — a circle menu is an icon menu. ## Troubleshooting ### I set Direction to None and the menu did not change Direction None exists to unlock Angle Start and Angle End, and those fields are currently broken — measured, the menu falls back to the default quarter-circle. Choose one of the eight Direction presets instead. ### The menu runs off the screen on phones Set a smaller **Circle Radius** for tablet and mobile. Each size falls back to the one above, so setting the mobile value alone is usually enough. ### My items overlap Raise the radius, or use fewer items. The arc length grows with the radius, so the items spread out. ### The menu does not open while I am editing The open and close behaviour does not preview inside the block editor — the editor says so on the control itself. Save and view the page to see it work. ## Related Docs - [Circle Menu feature guide](https://nexterwp.com/docs/add-a-circle-menu-in-wordpress/)- [Open the menu on click](https://nexterwp.com/docs/open-circle-menu-on-click-in-wordpress/)- [Navigation Menu block](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: Why does the Circle Menu not change when I set Direction to None?** A: Direction None is tied to Angle Start and Angle End, but those angle fields are broken on the front end. On a published page, the menu falls back to the default quarter-circle instead of using your custom sweep. The practical fix is to use one of the eight Direction presets, since that is the only path that currently changes the arc reliably. **Q: How do I stop a Circle Menu from running off the screen on phones?** A: A smaller Circle Radius is the main fix for mobile overflow. The block has separate tablet and mobile radius values, and each one falls back to the size above it, so setting the mobile value is usually enough. That matters because an arc that fits on desktop can easily push items beyond a phone screen if the radius stays too large. **Q: Why are my Circle Menu items overlapping?** A: Overlap usually means the arc is too tight for the number of items. Raising the Circle Radius increases the arc length, which spreads items farther apart. Using fewer items also helps because the menu spaces items evenly along the arc and does not let you nudge individual items into custom positions. **Q: Why does the Circle Menu not open inside the block editor?** A: The open and close animation does not preview in the block editor. The control itself says this, so editing mode is not a reliable place to judge how it behaves. Save and view the page on the front end if you want to confirm timing, direction, and spacing. **Q: What do I need before creating a Circle Menu in WordPress with Nexter?** A: The Circle Menu block needs Nexter Blocks Pro.Block enabled under Nexter > Blocks in your WordPress dashboard. That is the key prerequisite before you can use Layout set to Circle, add links in Menu List, and tune options like Circle Radius or Icon Delay. Without that Pro block enabled, the tutorial steps cannot be completed. **Q: Is a Circle Menu better for short labels or longer menu text?** A: Short labels work better because a circle menu is really an icon menu. Long titles belong in the tooltip rather than on each item, since items are evenly spaced along an arc and there is no way to nudge one item farther out than another. That keeps the layout readable instead of cluttered.