Remove caret from semantic-ui react dropdown menu

Question

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

Oleksandr Fediashov · Accepted Answer · 2017-08-27 11:21:36Z

19

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

answered Aug 27, 2017 at 11:21

Oleksandr Fediashov

4,3351 gold badge26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rimraf Over a year ago

thanks for the information! i thought i had tried that icon null situation but will give another go

Collectives™ on Stack Overflow

Remove caret from semantic-ui react dropdown menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related