# `Noora.Dropdown`

Renders a customizable dropdown component with a trigger, menu, and item options, supporting icons, labels, and event handling.

## Example

```elixir
<.dropdown id="menu" label="Options">
  <.dropdown_item label="Edit" navigate="/edit" />
  <.dropdown_item label="Delete" on_click="delete" />
</.dropdown>
```

# `dropdown`

## Attributes

* `id` (`:string`) (required) - Unique identifier for the dropdown component.
* `label` (`:string`) - Main text displayed in the dropdown trigger. Defaults to `nil`.
* `size` (`:string`) - The size of the dropdown trigger. Defaults to `"large"`. Must be one of `"medium"`, or `"large"`.
* `secondary_text` (`:string`) - Secondary text displayed to the left of the main label. Defaults to `nil`.
* `icon_only` (`:boolean`) - Whether the dropdown trigger is icon-only. Defaults to `false`.
* `hint` (`:string`) - Hint text for the dropdown. Defaults to `nil`.
* `disabled` (`:boolean`) - Whether the dropdown is disabled. Defaults to `nil`.
* `on_open_change` (`:string`) - Event handler for when the dropdown opens. Defaults to `nil`.
* `on_highlight_change` (`:string`) - Event handler for when the highlighted option changes. Defaults to `nil`.
* `on_select` (`:string`) - Event handler for when an option is selected. Defaults to `nil`.
* `on_escape_key_down` (`:string`) - Event handler for when the escape key is pressed. Defaults to `nil`.
* `on_pointer_down_outside` (`:string`) - Event handler for when the pointer is pressed outside the dropdown. Defaults to `nil`.
* `on_focus_outside` (`:string`) - Function called when the focus is moved outside the component. Defaults to `nil`.
* `on_interact_outside` (`:string`) - Function called when an interaction happens outside the component. Defaults to `nil`.
* `close_on_select` (`:boolean`) - Whether to close the dropdown when an item is selected. Defaults to `true`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `icon` - Icon to be rendered in the dropdown trigger.
* `search` - Search input to be rendered at the top of the dropdown menu (outside scroll area).
* `inner_block` - Content to be rendered inside the dropdown menu.

# `dropdown_item`

## Attributes

* `value` (`:string`) - Value associated with the dropdown item.
* `on_click` (`:string`) - Event handler for when the dropdown item is clicked. Defaults to `nil`.
* `patch` (`:string`) - Phoenix LiveView patch navigation path. Defaults to `nil`.
* `navigate` (`:string`) - Phoenix LiveView navigation path. Defaults to `nil`.
* `href` (`:string`) - Standard URL for navigation. Defaults to `nil`.
* `size` (`:string`) - Size of the dropdown item. Defaults to `"small"`. Must be one of `"small"`, or `"large"`.
* `label` (`:string`) - Text displayed as the main content of the item. Defaults to `nil`.
* `secondary_text` (`:string`) - Secondary text displayed in parentheses after the label. Defaults to `nil`.
* `description` (`:string`) - Additional description text (only visible when size is 'large'). Defaults to `nil`.
* `checked` (`:boolean`) - When set to true or false, renders a checkbox in the checked or unchecked state. When nil (default), no checkbox is rendered. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `right_icon` - Optional slot for rendering an icon on the right side of the item.
* `left_icon` - Optional slot for rendering an icon on the left side of the item.

# `dropdown_separator`

# `inline_dropdown`

## Attributes

* `id` (`:string`) (required) - Unique identifier for the dropdown component.
* `label` (`:string`) - Main text displayed in the dropdown trigger. Defaults to `nil`.
* `size` (`:string`) - The size of the inline dropdown trigger. Defaults to `"small"`. Must be one of `"small"`, or `"large"`.
* `disabled` (`:boolean`) - Whether the dropdown is disabled. Defaults to `nil`.
* `on_open_change` (`:string`) - Event handler for when the dropdown opens. Defaults to `nil`.
* `on_highlight_change` (`:string`) - Event handler for when the highlighted option changes. Defaults to `nil`.
* `on_select` (`:string`) - Event handler for when an option is selected. Defaults to `nil`.
* `on_escape_key_down` (`:string`) - Event handler for when the escape key is pressed. Defaults to `nil`.
* `on_pointer_down_outside` (`:string`) - Event handler for when the pointer is pressed outside the dropdown. Defaults to `nil`.
* `on_focus_outside` (`:string`) - Function called when the focus is moved outside the component. Defaults to `nil`.
* `on_interact_outside` (`:string`) - Function called when an interaction happens outside the component. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `icon` - Icon to be rendered in the dropdown trigger.
* `inner_block` - Content to be rendered inside the dropdown menu.

---

*Consult [api-reference.md](api-reference.md) for complete listing*