> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: dc96d81e-c073-4df6-9fb2-c1472154a90e
---

# Dropdown | UI components

> Learn about the Dropdown component for use in UI extensions.

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

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.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extensions-dropdown-variants.gif" alt="ui-extensions-dropdown-variants" />
</Frame>

```jsx theme={null}
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**

<Warning>The `options` prop has been deprecated. Define options using `<Dropdown.ButtonItem>` child components instead, which provide more flexibility for [using overlays](#adding-overlays).</Warning>

| **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.                                                                                                         |
| `options` <Tag type="warning">Deprecated</Tag> | Object                                                    | The options included in the dropdown menu. Each option includes:<ul><li>`label`: the text label for the option.</li><li>`onClick`: the function that gets invoked when the option is selected.</li></ul> |
| `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**

| 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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tooltip), [Modal](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal), or [Panel](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/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](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#open-overlays).

<Frame>
  <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/KB-ui-extensions/ui-extension-modal-overlay-in-dropdown-example.gif" alt="Screen capture of a Modal overlay being opened from a Dropdown child component" />
</Frame>

```jsx highlight={26-35} theme={null}
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:

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/dropdown-buttons-primary.png" alt="dropdown-buttons-primary" />
</Frame>

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

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/dropdown-buttons-secondary.png" alt="dropdown-buttons-secondary" />
</Frame>

* `'transparent'` buttons with size set to `'sm'` and `'md'` respectively:

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/dropdown-buttons-transparent.png" alt="dropdown-buttons-transparent" />
</Frame>

## Related components

* [CrmActionLink](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-action-link)
* [CrmCardActions](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-card-actions)
* [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button)