# Code ## Props

Props	Data Type	Required
children	-HTML tags -Custom Components (MenuOption, MenuHeader and MenuDivider)	✅
className	string	❌
search	boolean	❌
selectedItem	string	❌
checkSelectedItems	boolean	❌
removeSelectedItems	boolean	❌
show	boolean	❌
noContentMessage	string	❌
noResultMessage	string	❌
onChange	function	❌

### 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 |

Object
{

username?: string,
profilePic?: string

}

| :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( Element 1 Element 2 Element 3 Element 4 ) ``` ![](/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( Item 1 Item 2 ) } ``` ## 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="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://2600hz.gitbook.io/sds/sds-components/simple-components/menu/code.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.