# Wrapper

{% hint style="info" %}
This is a compound component.
{% endhint %}

### API

This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the className prop is not included in the table.

| Props         | Type                                     | Required |
| ------------- | ---------------------------------------- | -------- |
| `children`    | `ReactNode`                              | ✅        |
| `align`       | `'start' \| 'center' \| 'end'`           | :x:      |
| `alignOffset` | `number`                                 | :x:      |
| `side`        | `'top' \| 'right' \| 'bottom' \| 'left'` | :x:      |
| `sideOffset`  | `number`                                 | :x:      |
| `defaultOpen` | `boolean`                                | :x:      |

<details>

<summary>children</summary>

The children in this case, because it is a compound component, should be the ones provided by this design system.&#x20;

</details>

<details>

<summary>align</summary>

This prop changes the position of the `Menu` based on the `Trigger`.

</details>

<details>

<summary>alignOffset</summary>

An offset in pixels from the `"start"` or `"end"` alignment options.

</details>

<details>

<summary>side</summary>

Controls the side the menu is rendered from, always based on the trigger. Will be reversed when collisions occur automatically.

</details>

<details>

<summary>sideOffset</summary>

The distance in pixels from the trigger.

</details>

<details>

<summary>defaultOpen</summary>

Controls a default open state for the menu.

</details>