Skip to main content
Last modified: November 18, 2025
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
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.
buttonTextStringThe button text.
buttonSize'xs' | 'sm' | 'md' (default)The size of the button.
disabledBooleanWhen set to true, the dropdown button cannot be focused or clicked. Set to false by default.
<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