Does anyone know how to remove the caret on the <Menu><Dropdown>...
component?
The prop list for that component does not have a flag as far as i can tell. Does anyone have experience with this?
import React from 'react'
import { Dropdown, Menu } from 'semantic-ui-react'
import { Menu as MenuIcon } from 'react-feather'
// this automatically renders a right-hand caret on the menu
// I added my own icon 'MenuIcon' from the feather icon set
// and i want to get rid of the caret
const Header = () => (
<Menu vertical compact>
<Dropdown item text={<MenuIcon/>}>
<Dropdown.Menu>
<Dropdown.Item>Electronics</Dropdown.Item>
<Dropdown.Item>Automotive</Dropdown.Item>
<Dropdown.Item>Home</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu>
)
export default Header
Dropdown
component implements an icon
shorthand, so you can use following:
<Dropdown icon={null} /> // will render nothing
<Dropdown icon='remove' /> // will render 'remove' icon
<Dropdown icon={{ name: 'remove', onClick: () => console.log('iconClick') /> // will render 'remove' icon and add event hanlder
<Dropdown icon={<Icon name='remove' />} /> // will render 'Icon' component
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With