Context Menu

The context menu provides context-specific actions for items. Set the contextMenuItems to populate the context menu with actions. The organization chart component introduces a default context menu which provides actions to interact with the chart.

function OrganizationChart() {
  return (
    <OrgChart data={data} contextMenuItems={OrgChartContextMenuItems}></OrgChart>
  )
}

To adjust the context menu visualization, add a custom React component using the renderContextMenu prop.

function App() { return ( <OrgChart data={data} renderContextMenu={({item}) => ( <button onClick={() => alert(`${item.name} clicked!`)}>Click here!</button> )} ></OrgChart> ) } [ { "id": 1, "position": "Chief Executive Officer", "name": "Eric Joplin", "email": "ejoplin@yoyodyne.com", "status": "present", "icon": "../assets/usericon_male1.svg", "subordinates": [2, 3, 15] }, { "id": 2, "position": "Senior Executive Assistant", "name": "Alexander Burns", "email": "aburns@yoyodyne.com", "status": "busy", "icon": "../assets/usericon_male3.svg", }, { "id": 3, "position": "Junior Executive Assistant", "name": "Linda Newland", "email": "lnewland@yoyodyne.com", "status": "travel", "icon": "../assets/usericon_female1.svg", } ]