# certara-dropdown



<!-- Auto Generated Below -->


## Overview

Dropdown menus are typically used when you have 5-15 items to choose from. They’re used for navigation or command menus, where an action is initiated based on the selection.

## Properties

| Property          | Attribute           | Description                                                                                                                                                                     | Type                                                                                                         | Default          |
| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------- |
| `buttonColor`     | `button-color`      | Supports any `color` available in `<certara-button>`                                                                                                                            | `"brand" \| "danger" \| "inverse" \| "neutral" \| "secondary" \| "success"`                                  | `'secondary'`    |
| `buttonLabel`     | `button-label`      |                                                                                                                                                                                 | `string`                                                                                                     | `undefined`      |
| `buttonSize`      | `button-size`       | Supports any `size` available in `<certara-button>`                                                                                                                             | `"lg" \| "md" \| "sm"`                                                                                       | `'md'`           |
| `buttonTabindex`  | `button-tabindex`   | Set custom tabindex for the dropdown opener button                                                                                                                              | `number`                                                                                                     | `undefined`      |
| `buttonVariant`   | `button-variant`    | Supports any `variant` available in `<certara-button>`                                                                                                                          | `"default" \| "icon" \| "icon-rounded" \| "link" \| "outline" \| "reset"`                                    | `'default'`      |
| `disabled`        | `disabled`          | Will disable the dropdown opener button                                                                                                                                         | `boolean`                                                                                                    | `false`          |
| `menuOffset`      | `menu-offset`       | Separation from the opener to the menu (depends on orientation)                                                                                                                 | `number`                                                                                                     | `4`              |
| `nested`          | `nested`            | Specify that a nested dropdown can act as a submenu item of a containing dropdown                                                                                               | `boolean`                                                                                                    | `false`          |
| `placement`       | `placement`         | These options will suggest a starting point for the menu position, but `<certara-dropdown>` will automatically position itself within the viewport to avoid appearing offscreen | `"bottom-end" \| "bottom-start" \| "left-start" \| "right-end" \| "right-start" \| "top-end" \| "top-start"` | `'bottom-start'` |
| `position`        | `position`          | This can be set to `fixed` if the dropdown menu is clipped by a bounding parent element                                                                                         | `"absolute" \| "fixed"`                                                                                      | `'absolute'`     |
| `showOpenerCaret` | `show-opener-caret` | If set to `false`, the dropdown opener will not show a caret icon                                                                                                               | `boolean`                                                                                                    | `true`           |


## Events

| Event                  | Description | Type                |
| ---------------------- | ----------- | ------------------- |
| `certaraDropdownClose` |             | `CustomEvent<void>` |
| `certaraDropdownOpen`  |             | `CustomEvent<void>` |


## Slots

| Slot             | Description                                                                                |
| ---------------- | ------------------------------------------------------------------------------------------ |
|                  | Main slot is reserved for `<certara-dropdown-*>` elements, but it does accept all children |
| `"button-label"` | Can be used for custom label content, including icons                                      |


## Dependencies

### Depends on

- [certara-icon](../icon)
- [certara-button](../button)

### Graph
```mermaid
graph TD;
  certara-dropdown --> certara-icon
  certara-dropdown --> certara-button
  certara-button --> certara-icon
  style certara-dropdown fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------