# `m-action-listbox`

An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `open` | If `true`, displays the listbox when using the activator slot. | `boolean` | `$bindable()` |
| `title` | title displayed in mobile version. | `string` |   |
| `position` | Defines the position of the listbox relative to its trigger or container. | `'top'` `'bottom'` `'left'` `'right'` | `bottom` |
| `onclose` | Callback to trigger on close button click. | `() => void` |   |

## Slots

| Name | Description |
|------|-------------|
| `item` | The content displayed in the listbox item. |
| `activator` | The trigger used to toggle the listbox. It should contain one Button or IconButton. |

## Events

| Name | Description | Type |
|------|------|-------------|
| `close` | Emits when the close button is clicked. | `CustomEvent<void>` |

## Dependencies

### Depends on

- [m-action-listbox-item](../actionlistboxitem/README.md)
- [m-button](../button/README.md)
- [m-icon-button](../iconbutton/README.md)

### Graph

```mermaid
graph TD;
  m-action-listbox --> m-icon-button
  m-action-listbox --> m-action-listbox-item
  m-action-listbox --> m-button
style m-action-listbox fill:#008240,stroke:#333,stroke-width:4px
```

