Skip to main content
The Dropdown component renders a dropdown menu that opens on click, allowing users to select from a compact list of options. Define each dropdown item using <Dropdown.ButtonItem> with optional onClick handlers and overlay definitions for displaying tooltips and opening modals and panels.
ui-extensions-dropdown-variants
import { Dropdown, Tooltip } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <Dropdown>
      <Dropdown.ButtonItem onClick={() => console.log("clicked")}>Basic Action</Dropdown.ButtonItem>
      <Dropdown.ButtonItem
        onClick={() => console.log("clicked")}
        overlay={<Tooltip>This action does something important</Tooltip>}
      >
        Action with Tooltip
      </Dropdown.ButtonItem>
    </Dropdown>
  );
};

​
Props

<Dropdown> props
The options prop has been deprecated. Define options using <Dropdown.ButtonItem> child components instead, which provide more flexibility for using overlays.
PropTypeDescription
buttonSize'xs' | 'sm' | 'md' (default)The size of the button.
buttonTextStringThe button text.
disabledBooleanWhen set to true, the dropdown button cannot be focused or clicked. Set to false by default.
options DeprecatedObjectThe options included in the dropdown menu. Each option includes:
  • label: the text label for the option.
  • onClick: the function that gets invoked when the option is selected.
variant'primary' (default) | 'secondary' | 'transparent'The type of dropdown button to display. 'primary' and 'secondary' will display a blue and grey button, respectively, while 'transparent' will display a blue hyperlink.
<Dropdown.ButtonItem> props
PropTypeDescription
onClick() => voidThe function invoked when the item is clicked.
overlayOverlay componentAn overlay component to attach to the item, such as a Tooltip, Modal, or Panel.

​
Adding overlays

Similar to the example above, which adds a Tooltip overlay to a dropdown item, you can open modals and panels via dropdown items by defining the Modal or Panel within a Dropdown.ButtonItem component’s overlay prop. Learn more about opening overlays in the UI extension SDK reference.
Screen capture of a Modal overlay being opened from a Dropdown child component
import {
  Button,
  Dropdown,
  Tooltip,
  Modal,
  ModalBody,
  ModalFooter,
  Text,
  hubspot
} from '@hubspot/ui-extensions';

hubspot.extend(({ actions }) => <Extension actions={actions} />);

const Extension = ({ actions }) => {
  return (
<Dropdown>
    <Dropdown.ButtonItem onClick={() => console.log('clicked')}>
      Basic Action
    </Dropdown.ButtonItem>
    <Dropdown.ButtonItem
      overlay={<Tooltip placement="right">This action does something important</Tooltip>}
    >
      Action with Tooltip
    </Dropdown.ButtonItem>
    <Dropdown.ButtonItem
      overlay={
        <Modal id="my-modal" title="Example modal" width="md">
          <ModalBody>
            <Text>Modal Content</Text>
          </ModalBody>
          <ModalFooter>
            <Button onClick={() => actions.closeOverlay('my-modal')}>Close</Button>
          </ModalFooter>
        </Modal>
      }
    >
      Open modal
    </Dropdown.ButtonItem>
    </Dropdown>
  );
};

​
Variants

Using the variant and buttonSize props, you can set the type of button along with its size.
  • 'primary' buttons with size set to 'xs', 'sm', and 'md' respectively:
dropdown-buttons-primary
  • 'secondary' buttons with size set to 'xs', 'sm', and 'md' respectively:
dropdown-buttons-secondary
  • 'transparent' buttons with size set to 'sm' and 'md' respectively:
dropdown-buttons-transparent
Last modified on January 9, 2026