Radial Menu in Blazor Speed Dial

14 Aug 20262 minutes to read

Display SpeedDial action items in a circular pattern like a radial menu by setting the Mode property to Radial. Customize the Direction, StartAngle, EndAngle, and Offset using the SpeedDialRadialSettings tag directive.

Radial Menu direction

Open the action items in either a clockwise or an anticlockwise direction by setting the Direction property. The available RadialDirection values are:

  • Clockwise - Items are arranged in the clockwise direction.
  • AntiClockwise - Items are arranged in the anticlockwise direction.
  • Auto (default) - The direction is automatically determined based on the SpeedDial Position.
@using Syncfusion.Blazor.Buttons

<SfSpeedDial Mode="SpeedDialMode.Radial" OpenIconCss="e-icons e-edit">
    <SpeedDialRadialSettings Direction="RadialDirection.AntiClockwise" OffSet="80px"/>
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

Blazor SpeedDial radial mode

Start and end angle

Modify the start and end angles of the action items using the StartAngle and EndAngle properties (in degrees). If angles are not defined, the arc is determined by the Speed Dial Position.

The Speed Dial angle origin is 0° at the right side and increases in the clockwise direction.

Blazor SpeedDial radial angles

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Position="FabPosition.MiddleRight" Mode="SpeedDialMode.Radial" OpenIconCss="e-icons e-edit">
    <SpeedDialRadialSettings Direction="RadialDirection.AntiClockwise" StartAngle="130" EndAngle="230" OffSet="70px"/>
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

Blazor Speed Dial angles

Offset

Adjust the distance between the Speed Dial button and its action items using the Offset property.

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Mode="SpeedDialMode.Radial" OpenIconCss="e-icons e-edit">
    <SpeedDialRadialSettings OffSet="80px"/>
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

Blazor SpeedDial radial offset