Plugin SDK > Dropdown

<Canvas ctx={ctx}>
  <Dropdown
    renderTrigger={({ open, onClick }) => (
      <Button
        onClick={onClick}
        rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
      >
        Options
      </Button>
    )}
  >
    <DropdownMenu>
      <DropdownOption onClick={() => {}}>Edit</DropdownOption>
      <DropdownOption disabled onClick={() => {}}>
        Duplicate
      </DropdownOption>
      <DropdownSeparator />
      <DropdownOption red onClick={() => {}}>
        Delete
      </DropdownOption>
    </DropdownMenu>
  </Dropdown>
</Canvas>

<Canvas ctx={ctx}>
  <Dropdown
    renderTrigger={({ open, onClick }) => (
      <Button
        onClick={onClick}
        rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
      >
        Fields
      </Button>
    )}
  >
    <DropdownMenu>
      <DropdownOption>
        First option
        <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
        <DropdownOptionAction
          red
          icon={<TrashIcon />}
          onClick={() => {}}
        />
      </DropdownOption>
      <DropdownOption>
        Second option
        <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
        <DropdownOptionAction
          red
          icon={<TrashIcon />}
          onClick={() => {}}
        />
      </DropdownOption>
    </DropdownMenu>
  </Dropdown>
</Canvas>

<Canvas ctx={ctx}>
  <Dropdown
    renderTrigger={({ open, onClick }) => (
      <Button
        onClick={onClick}
        rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
      >
        Fields
      </Button>
    )}
  >
    <DropdownMenu>
      <DropdownGroup name="Group 1">
        <DropdownOption>Foo</DropdownOption>
        <DropdownOption>Bar</DropdownOption>
        <DropdownOption>Qux</DropdownOption>
      </DropdownGroup>
      <DropdownGroup name="Group 2">
        <DropdownOption>Foo</DropdownOption>
        <DropdownOption>Bar</DropdownOption>
        <DropdownOption>Qux</DropdownOption>
      </DropdownGroup>
      <DropdownGroup name="Group 3">
        <DropdownOption>Foo</DropdownOption>
        <DropdownOption>Bar</DropdownOption>
        <DropdownOption>Qux</DropdownOption>
      </DropdownGroup>
    </DropdownMenu>
  </Dropdown>
</Canvas>