Introducing the New .NET MAUI Radial Menu Control
Tags: dotnetmaui, mobile, whatsnew, ui
Published: 2024-03-28 03:51:00

---
title: Introducing the New .NET MAUI Radial Menu Control
published: true
date: 2024-03-25 15:05:55 UTC
tags: dotnetmaui, mobile, whatsnew, ui
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-radial-menu-control
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihhoc9wz37g4runybkvj.png
---

**TLDR:** Illustrating the features of the new Syncfusion .NET MAUI Radial Menu control and the steps to integrate it into your .NET MAUI app.

We are happy to introduce another navigation control in the [Syncfusion .NET MAUI suite](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI UI controls") for the [2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release, the .NET MAUI Radial Menu!

The new [.NET MAUI Radial Menu](https://www.syncfusion.com/maui-controls/maui-radial-menu ".NET MAUI Radial Menu") control displays a hierarchical menu in a circular layout. It is optimized for touch-enabled devices. Typically, it is used as a context menu and can expose more menu items in the same space as traditional menus.

In this blog, we’ll explore the key features of the .NET MAUI Radial Menu control and the steps to get started!

## Key features

The key features of the new .NET MAUI Radial Menu control are:

- [Font icons](#Font)
- [Center button customization](#Center)
- [Nested items](#Nested)
- [Placing and dragging](#Placing)

### <a name="Font">Font icons</a>

The .NET MAUI Radial Menu control has a built-in icon font option that helps users easily add vector images. This prevents them from experiencing image glitches often faced with traditional image icons.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Font-icons-support-in-.NET-MAUI-Radial-Menu-control.png" alt="Font icons support in .NET MAUI Radial Menu control" style="width:100%">

  <figcaption>Font icons support in .NET MAUI Radial Menu control</figcaption>

</figure>

### <a name="Center">Center button customization</a>

The center or back button is a view in the center of the Radial Menu. It can be used to perform operations such as opening and closing the rim and navigating to the next level items. You can customize the center or back button with a font icon, custom view, and caption.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Customizing-the-center-button-in-the-.NET-MAUI-Radial-Menu-control.png" alt="Customizing the center button in the .NET MAUI Radial Menu control" style="width:100%">

  <figcaption>Customizing the center button in the .NET MAUI Radial Menu control</figcaption>

</figure>

### <a name="Nested">Nested items</a>

You can populate nested levels of items within a menu to group similar actions based on their result. For example, you can group clipboard operations by adding a clipboard as the main menu and cutting, copying, and pasting as its children.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Nested-items-in-the-.NET-MAUI-Radial-Menu-control.png" alt="Nested items in the .NET MAUI Radial Menu control" style="width:100%">

  <figcaption>Nested items in the .NET MAUI Radial Menu control</figcaption>

</figure>

### <a name="Placing">Placing and dragging</a>

You can place the Radial Menu anywhere on its parent layout. The position of the Radial Menu is calculated based on the center position of the parent layout.  We can also make the Radial Menu float over the parent layout to avoid obscuring the content behind it.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Dragging-and-placing-the-.NET-MAUI-Radial-Menu-over-a-layout.png" alt="Dragging and placing the .NET MAUI Radial Menu over a layout" style="width:100%">

  <figcaption>Dragging and placing the .NET MAUI Radial Menu over a layout</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Radial Menu documentation.](https://help.syncfusion.com/maui/radial-menu/overview "Getting started with the .NET MAUI Radial Menu")

## Getting started with the .NET MAUI Radial Menu control

We have seen the key features of the .NET MAUI Radial Menu control. Let’s learn how to integrate it into your .NET MAUI app and utilize its features by following these steps:

### Step 1: Create a .NET MAUI application

First, create a new [.NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app").

### Step 2: Add the required NuGet package

The Syncfusion .NET MAUI controls are available on the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI Radial Menu control to your project, open the  **NuGet package manager**  in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio") and search for [Syncfusion.Maui.RadialMenu](https://www.nuget.org/packages/Syncfusion.Maui.RadialMenu "Syncfusion.Maui.RadialMenu NuGet package") package, and install it.

### Step 3: Register the Syncfusion core handler

Now, register the handler for the Syncfusion core in the  **MauiProgram.cs**  file. Refer to the following code example.

```csharp
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace CarouselSample
{
   public static class MauiProgram
   {
     public static MauiApp CreateMauiApp()
     {
       var builder = MauiApp.CreateBuilder();
       builder
           .UseMauiApp<App>()
           .ConfigureSyncfusionCore()
           .ConfigureFonts(fonts =>
           {
              fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
           });
       return builder.Build();
     }
   }
}
```

### Step 4: Add the required namespace

Then, add the **Syncfusion.Maui.RadialMenu** namespace in your XAML page. Refer to the following code example.

```xml
xmlns:radialMenu="clr-namespace:Syncfusion.Maui.RadialMenu;assembly=Syncfusion.Maui.RadialMenu"
```

### Step 5: Initialize the Syncfusion .NET MAUI Radial Menu control

Finally, initialize the Syncfusion .NET MAUI Radial Menu control. Refer to the following code example.

```xml
<ContentPage.Content>
 <syncfusion:SfRadialMenu x:Name="radialMenu" 
                          CenterButtonText="Edit"
                          CenterButtonFontSize="15">
  <syncfusion:SfRadialMenu.Items>
   <syncfusion:SfRadialMenuItem Text="Cut"
                                FontSize="15"/>
   <syncfusion:SfRadialMenuItem Text="Copy"
                                FontSize="15"/>
   <syncfusion:SfRadialMenuItem Text="Paste"
                                FontSize="15"/>
   <syncfusion:SfRadialMenuItem Text="Crop"
                                FontSize="15"/>
   <syncfusion:SfRadialMenuItem Text="Paint"
                                FontSize="15"/>
  </syncfusion:SfRadialMenu.Items>
 </syncfusion:SfRadialMenu>
</ContentPage.Content>
```

After executing the above code examples, we will get the following output.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Integrating-the-Radial-Menu-into-a-.NET-MAUI-application.png" alt="Integrating the Radial Menu into a .NET MAUI application" style="width:100%">

  <figcaption>Integrating the Radial Menu into a .NET MAUI application</figcaption>

</figure>

## GitHub reference

For more details, refer to the [.NET MAUI Radial Menu GitHub demo](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-Radial-Menu ".NET MAUI Radial Menu GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new [.NET MAUI Radial Menu](https://www.syncfusion.com/maui-controls/maui-radial-menu ".NET MAUI Radial Menu") control introduced in the [2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release. Check out our [Release Notes](https://www.syncfusion.com/products/release-history "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages for the other updates in this release, and leave your feedback in the comments section below.

For current Syncfusion customers, the newest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "Essential Studio license and downloads page"). If you are not a customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get the free evaluation of the Essential Studio products") to check out these new features.

You can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2024 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2024-vol-1 "Blog: Syncfusion Essential Studio 2024 Volume 1 Is Here!")
- [Chart of the Week: Creating a .NET MAUI Fast Line Chart to Visualize the Arctic Sea Ice Extent Since 2000](https://www.syncfusion.com/blogs/post/maui-fast-line-chart-arctic-ice.aspx "Blog: Chart of the Week: Creating a .NET MAUI Fast Line Chart to Visualize the Arctic Sea Ice Extent Since 2000")
- [Introducing the 11th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/dotnet-maui-2024-volume-1.aspx "Blog: Introducing the 11th Set of New .NET MAUI Controls and Features")
- [Enhancing User Experience: Implementing Typos Tolerance in .NET MAUI Autocomplete](https://www.syncfusion.com/blogs/post/tolerate-typos-maui-autocomplete.aspx "Blog: Enhancing User Experience: Implementing Typos Tolerance in .NET MAUI Autocomplete")