# SubComponents

### Trigger

The trigger is the element that will control the render of the `Menu`. The trigger API does **NOT** extend the native div element props, so be careful with that.

### Trigger API

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

### SubTrigger

The subtrigger is the element that will control the render of the `Menu.Sub`. The trigger API does **NOT** extend the native div element props, so be careful with that.

<details>

<summary>children</summary>

The children is required to pass the component or structure that controls the menu state.

</details>

### Sub

This subcomponent extends the native [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes) props. This would render a `SubMenu` that must be inside a `Menu.`

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

### CustomArea

An space to render custom elements in the menu.

### CustomArea API

This subcomponent extends the native [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes) props.&#x20;

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

### Divider

The divider subcomponent renders a visual element that represents a division. This component also extends the native div props.

### Search

The Search subcomponent extends the SDS search component. See for reference: [Search](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/menu/code/broken-reference).

### Option

The `Option` Subcomponent receives a children that renders content that when clicked, closes the Menu automatically.&#x20;

### Option API

This subcomponent 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`                   | :x:      |
| `layout`     | `'horizontal' \| 'vertical';` | :x:      |
| `isDisabled` | `boolean`                     | :x:      |
| `isSelected` | `boolean`                     | :x:      |
| `isHidden`   | `boolean`                     | :x:      |
| `onClick`    | `(e: MouseEvent) => void;`    | :x:      |

<details>

<summary>children</summary>

The element displayed, can be a string or an HTML structure.

</details>

<details>

<summary>layout and isDisabled</summary>

Controls the option layout direction.  `isDisabled` controls wether the Option should be disabled or not.

</details>

<details>

<summary>isSelected and isHidden</summary>

Creates a visual indicator on each option to determined wether they are selected or hidden.

</details>

<details>

<summary>onClick</summary>

A function that is called when the individual option is called.

</details>

### Header

The header subcomponent is used to render a title. This subcomponent should always be the parent of the `Actions` subcomponent, in order to mantain the composition pattern always working.

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | :x:      |

<details>

<summary>children</summary>

The title is the string passed, and the is the `Actions` subcomponent passed as children.  A small example can be seen below.

</details>

{% code overflow="wrap" %}

```tsx
<Menu.Header>
{/* this becomes the title */}
    I am a header
{/* This is always passed as children of the Menu.Header. */}
    <Menu.Actions>
        <Button iconOnly='plus'></Button>
    </Menu.Actions>
</Menu.Header>
```

{% endcode %}

### Actions

The actions subcomponent is and should always be wrapped by a Menu.Header. This subcomponent also extends the native [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes) API. You should know that all SDS Buttons that are passed as children to the Actions subcomponents, the type will be converted to **`small buttons.`**