Dropdown | UI components

On this page

Variants
Related components

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.

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"
    />
  );
};

Prop	Type	Description
`options`	Object	The 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.
`buttonText`	String	The button text.
`buttonSize`	`'xs'`, `'extra-small'` \| `'sm'`, `'small'` \| `'md'`, `'medium'` (default)	The size of the button.
`disabled`	Boolean	When set to `true`, the dropdown button cannot be focused or clicked. Set to `false` by default.