Dropdown | Mineral UI

Data-Driven

Dropdown content is 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.

() => {
  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',
      onClick: () => { console.log('onClick is not triggered for disabled MenuItems'); },
      disabled: true
    },
    {
      title: 'Group Title',
      group: true
    },
    {
      text: 'Success variant',
      variant: 'success'
    },
    {
      text: 'Warning variant',
      variant: 'warning'
    },
    {
      text: 'Danger variant',
      variant: 'danger'
    }
  ];

  return (
    <Dropdown data={data}>
      <Button>Menu</Button>
    </Dropdown>
  );
}