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	✅
description	string	❌
icon	boolean	❌
avatar	Object { username?: string, profilePic?: string }	❌
avatarStatus	'None' | 'Online' | 'Busy' | 'Away' | 'Ringing" | 'OnCall' | 'OnExternalCall' | 'Recovery' | 'Offline'	❌
value	string	❌
disabled	boolean	❌
onClick	event function	❌

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.

MenuHeader

Props	Data Type	Required
children	string	✅

MenuDivider

It has no props or any configuration.

Example:

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

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.

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

  • Avatar

  • Telicon

Live Demo

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

React

General Components / Menu - Basic Menu ⋅ Storybooksipster-react-component-storybook.netlify.app