Radial menu in React Speed dial component

2 Mar 20267 minutes to read

Display SpeedDial action items in a circular pattern around the button by setting the mode property to Radial. Customize the radial layout using the radialSettings property to control direction, startAngle, endAngle, and offset values. This creates an elegant radial menu ideal for displaying multiple related actions.

Radial menu direction

Control the direction in which items are arranged around the button by setting the direction property to either Clockwise or AntiClockwise. The default value is Auto, which automatically determines the direction based on the SpeedDial’s position property.

{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* To render Speed Dial.*/}
function App() {

  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
  ];

  const radialSettings: RadialSettingsModel = { direction: 'AntiClockwise' };

  return (
    {/* Initialize the SpeedDial component. */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode= 'Radial' radialSettings= {radialSettings} target="#targetElement"></SpeedDialComponent>
  );
}
export default App;

Radial menu start and end angle

Control the angular span of the radial menu by setting the startAngle and endAngle properties. These angles determine where items begin and end around the circle (0-360 degrees). If angles are not defined, items automatically distribute based on the SpeedDial’s position property. Use custom angles to create partial arcs or specific patterns.

{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* To render Speed Dial.*/}
function App() {

  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
  ];

  const radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', startAngle: 180, endAngle: 360 };

  return (
    {/* Initialize the SpeedDial component. */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode= 'Radial' radialSettings= {radialSettings} position='MiddleCenter' target="#targetElement"></SpeedDialComponent>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Offset

Control the distance between action items and the SpeedDial button using the offset property. A larger offset pushes items further from the center button, while smaller values bring them closer. Adjust this to optimize layout spacing based on your design needs.

{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* To render Speed Dial.*/}
function App() {

  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
  ];

  const radialSettings: RadialSettingsModel = { offset: '80px' };

  return (
    {/* Initialize the SpeedDial component. */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode= 'Radial' radialSettings= {radialSettings} target="#targetElement"></SpeedDialComponent>
  );
}
export default App;

Below example demonstrates the radial menu settings of the Speed Dial.

app.jsx

import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  const items = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
  ];
  const radialSettings = { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 };
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode='Radial' position='MiddleRight' radialSettings={radialSettings} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
  ];
  const radialSettings: RadialSettingsModel = { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 };

  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode='Radial' position='MiddleRight' radialSettings={radialSettings} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));