Menu

Data-Driven

Menu content can also be defined by an array of data, with the structure shown in the code example below. Object properties will be passed on to the MenuItem.

MenuDividers are created simply by passing { divider: true } as an item.

MenuGroups are created simply by passing { group: true, title: 'Group Title' } as an item.

Menu item with onClick
Menu itemSecondary text
Icon at start
Icon at end
Disabled menu item

Group Title

Success variant
Warning variant
Danger variant
() => {
  const data = [
    {
      text: 'Menu item with onClick',
      onClick: event => { console.log(event); }
    },
    {
      text: 'Menu item',
      secondaryText: 'Secondary text'
    },
    {
      text: 'Icon at start',
      iconStart: <IconCloud />
    },
    {
      text: 'Icon at end',
      iconEnd: <IconCloud />
    },
    {
      divider: true
    },
    {
      text: 'Disabled menu item',
      disabled: true,
      onClick: () => { console.log('onClick is not triggered for disabled items'); }
    },
    {
      group: true,
      title: 'Group Title'
    },
    {
      text: 'Success variant',
      variant: 'success'
    },
    {
      text: 'Warning variant',
      variant: 'warning'
    },
    {
      text: 'Danger variant',
      variant: 'danger'
    }
  ];

  return (
    <DemoLayout>
      <Menu data={data} itemKey="text" />
    </DemoLayout>
  );
}