0

I am using react-toolbox menu for my website. Based on the example given in the documentation React-toolbox menu, I can only use icon as my menu. How can I use text for the menu instead?

Example of what I want to do:

When I click the blog text which is a menu, the menuItem will be shown.

Example

Is it possible to do this?

Alvindrakes
  • 596
  • 7
  • 18

3 Answers3

1

just remove icon property from MenuItem component

 <IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
  <MenuItem value='download' caption='Download' />
  <MenuItem value='help' caption='Favorite' />
  <MenuItem value='settings' caption='Open in app' />
  <MenuDivider />
  <MenuItem value='signout' icon='delete' caption='Delete' disabled />
 </IconMenu>
Vijay
  • 169
  • 7
  • This method works, but then I realized the whole text area is not fully clickable, only by clicking the right position in the text, the MenuItem will show up, how can I solve this problem? – Alvindrakes Jul 11 '18 at 07:41
0

You can pass an element to the icon property like that:

<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>

Aliaksandr Sushkevich
  • 11,550
  • 7
  • 37
  • 44
0

In case someone else has the problem, the solution is to use Menu component instead of IconMenu. Like this :

const [menuActive, setMenuActive] = useState(false);
return (
  <div style={{ position: 'relative' }}>
    <Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
    <Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
     <MenuItem value='download' caption='Download' />
     <MenuItem value='action' caption='Action' />
    </Menu>
  </div>
);
Quentin Mauret
  • 1
  • 1