Dropdown | UI components

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.

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

Prop	Type	Description
`buttonSize`	`'xs'` \| `'sm'` \| `'md'` (default)	The size of the button.
`buttonText`	String	The button text.
`disabled`	Boolean	When set to `true`, the dropdown button cannot be focused or clicked. Set to `false` by default.
`variant`	`'primary'` (default) \| `'secondary'` \| `'transparent'`	The type of dropdown button to display. Learn more about button styles in the button reference article. Note that the `transparent` variant is deprecated as of version `v1` of the UI extensions SDK.

<Dropdown.ButtonItem> props

Prop	Type	Description
`onClick`	`() => void`	The function invoked when the item is clicked.
`overlay`	Overlay component	An 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:

'secondary' buttons with size set to 'xs', 'sm', and 'md' respectively:

Build apps

Add features

Publish to the HubSpot Marketplace

Skeleton group 5

Dropdown | UI components

Props

Adding overlays

Variants

​Props

​Adding overlays

​Variants

​Related components

Props

Adding overlays

Variants

Related components