Skip to main content
Last modified: August 22, 2025
The Dropdown component renders a dropdown menu that can appear as a button or hyperlink. Use this component to enable users to select from multiple options in a compact list. This component includes sizing options.
ui-extensions-dropdown-variants
import { Dropdown } from '@hubspot/ui-extensions';

const Extension = () => {
  const ddOptions = [
    {
      label: 'Clone',
      onClick: () => console.log({ message: 'Clone group' }),
    },
    {
      label: 'Delete',
      onClick: () => console.log({ message: 'Delete group' }),
    },
  ];

  return (
    <Dropdown
      options={ddOptions}
      variant="primary"
      buttonSize="md"
      buttonText="More"
    />
  );
};
PropTypeDescription
optionsObjectThe options included in the dropdown menu. For each option, include:
  • 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', 'extra-small' | 'sm', 'small' | 'md', 'medium' (default)The size of the button.
disabledBooleanWhen set to true, the dropdown button cannot be focused or clicked. Set to false by default.

​
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