> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/simple-components/menu/code.md).

# Code

## Props

<table><thead><tr><th width="179">Props</th><th width="329.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>children</td><td>-HTML tags<br>-Custom Components<br><em>(MenuOption, MenuHeader and MenuDivider)</em></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>search</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>selectedItem</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>checkSelectedItems</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>removeSelectedItems</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>show</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>noContentMessage</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>noResultMessage</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onChange</td><td>function</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### removeSelectedItem

Once an item has been clicked and selected, it will be removed from the list.

### checkSelectedItem

Once an item has been clicked and selected, it will show a darker background as a visual indicator.

### Children

To generate the structure required for the menu, the developer is able to insert the following components as children elements:

#### MenuOption

| Props        | Data Type                                                                                                      | Required             |
| ------------ | -------------------------------------------------------------------------------------------------------------- | -------------------- |
| children     | string                                                                                                         | :white\_check\_mark: |
| description  | string                                                                                                         | :x:                  |
| icon         | boolean                                                                                                        | :x:                  |
| avatar       | <p>Object<br>{</p><p>  username?: string,<br>  profilePic?: string</p><p>}</p>                                 | :x:                  |
| avatarStatus | 'None' \| 'Online' \| 'Busy' \| 'Away' \| 'Ringing" \| 'OnCall' \| 'OnExternalCall' \| 'Recovery' \| 'Offline' | :x:                  |
| value        | string                                                                                                         | :x:                  |
| disabled     | boolean                                                                                                        | :x:                  |
| onClick      | event function                                                                                                 | :x:                  |

{% hint style="info" %}
At using the `MenuOption` inside a `Menu` component, the `onClick` is automatically attached and linked with the `onChange` event of the `Menu` component, so adding it is not necessary and also won't work, because the `onClick` will be replaced by the default `onChange` event in `Menu` component.
{% endhint %}

#### MenuHeader

| Props    | Data Type | Required             |
| -------- | --------- | -------------------- |
| children | string    | :white\_check\_mark: |

#### MenuDivider

It has no props or any configuration.

#### Example:

```jsx
return(

  <Menu onChange={randomFunction} show >
    <MenuOption value='element1'> Element 1 </MenuOption>
    <MenuOption value='element2'> Element 2 </MenuOption>
    <MenuDivider />
    <MenuOption value='element3'> Element 3 </MenuOption>
    <MenuOption value='element4'> Element 4 </MenuOption>
  </Menu>
  
)
```

![](/files/HUNRm0Pndh3rydPrO3z5)*Menu generated with previous structure*

### onChange

At clicking one the options inside the Menu component, automatically the onChange function event is going to be triggered, allowing developer to execute a custom function that is going to receive as a default param the value of the selected item.

```tsx
import React, {useState} from 'react';

const Example = ()=>{
    const [selection, setSelection] = useState('');

    const change = (e)=>{
      setSelectedValue(e.value);
    }

    return(
      <Menu structure={structure} onChange={change}>
        <MenuOption value='item1'>Item 1</MenuOption>
        <MenuOption value='item2'>Item 2</MenuOption>
      </Menu>
    )
}
```

## Components Dependency

For this component elaboration there were used the following internal components:

* Menu Header
* Menu Divider
* [Menu Option](broken://pages/AH7v9G27NvVPgKXIHk3E)
  * [Avatar](/sds/sds-components/simple-components/avatar.md)
  * [Telicon](/sds/sds-components/simple-components/telicon.md)

## Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=%2Fstory%2Fgeneral-components-menu--basic-menu>" %}