# dropdown (Flowbite v4 kit)

> The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.

## Props for `Dropdown`

| Name | Type | Description |
|------|------|-------------|
| `id` | `string` | Unique identifier for generating internal IDs |
| `open` | `boolean` | Whether the dropdown is open on initial render. Defaults to `false` |
| `placement` | `'bottom'|'top'|'left'|'right'|'left-start'|'left-end'|'right-start'|'right-end'|'bottom-start'|'bottom-end'|'top-start'|'top-end'` | The dropdown placement relative to the trigger. Defaults to `bottom` |
| `triggerType` | `'click'|'hover'` | The dropdown trigger type. Defaults to `click` |
| `int` | `delay` | The dropdown delay. Defaults to `300` |
| `int` | `offsetDistance` | The dropdown content offset. Defaults to `10` |

## Blocks for `Dropdown`

- `content`: The dropdown structure (Dropdown:Trigger and Dropdown:Content)

## Blocks for `Dropdown:Content`

- `content`: The dropdown menu content, typically includes `Dropdown:Group`, `Dropdown:Header`

## Blocks for `Dropdown:Group`

- `content`: The list of `Dropdown:Item` elements

## Blocks for `Dropdown:Header`

- `content`: The header content (e.g., user name, email)

## Props for `Dropdown:Item`

| Name | Type | Description |
|------|------|-------------|
| `string` | `as` | The item tag. Defaults to `a` |

## Blocks for `Dropdown:Item`

- `content`: The item label

## Props for `Dropdown:Sub`

| Name | Type | Description |
|------|------|-------------|
| `id` | `string` | Unique identifier for generating internal IDs |
| `placement` | `'bottom'|'top'|'left'|'right'|'left-start'|'left-end'|'right-start'|'right-end'|'bottom-start'|'bottom-end'|'top-start'|'top-end'` | The dropdown placement relative to the trigger. Defaults to `right-start` |
| `triggerType` | `'click'|'hover'` | The dropdown trigger type. Defaults to `click` |
| `int` | `delay` | The dropdown delay. Defaults to `300` |
| `int` | `offsetDistance` | The dropdown content offset. Defaults to `10` |

## Blocks for `Dropdown:Sub`

- `content`: The dropdown structure (Dropdown:SubTrigger and Dropdown:Content)

## Blocks for `Dropdown:SubTrigger`

- `content`: The trigger label that toggles the sub dropdown when clicked

## Blocks for `Dropdown:Trigger`

- `content`: The trigger element (e.g., a `Button`) that toggles the dropdown when clicked

## Dependencies

- symfony/ux-icons
- twig/extra-bundle
- twig/html-extra:^3.12.0
- tales-from-a-dev/twig-tailwind-extra:^1.0.0

- [View component](https://ux.symfony.com/toolkit/kits/flowbite-4/components/dropdown)