Adding a icon to React Bootstrap Dropdown

Question

I'm trying to add an icon to my react dropdown button as shown in the following button.

I couldn't find a way to implement this with the react bootstrap package i'm using.

https://react-bootstrap.github.io/

I tried using the normal bootstrap 4 to to this. But found out that it needs jquery to open the dropdown menu. How can i add a icon to my react bootstrap drop down?

My code

   <DropdownButton id="example-month-input-2" title={this.state.weekselectedType}>
         <Dropdown.Item onClick={() => this.changeWeekValue('a')}>A</Dropdown.Item>
         <Dropdown.Item onClick={() => this.changeWeekValue('b')}>B</Dropdown.Item>
         <Dropdown.Item onClick={() => this.changeWeekValue('c')}>C</Dropdown.Item>
   </DropdownButton>

I managed to remove the default dropdown icon using the following css

.dropdown-toggle::after {
    display:none !important;
}

Agney · Accepted Answer · 2019-10-29 05:22:51Z

React Bootstrap allows you to customise Dropdown by passing in custom subcomponents. To customise the toggle button, you can use:

// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {/* Render custom icon here */}
    &#x25bc;
    {children}
  </a>
));

render(
  <Dropdown>
    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
      Custom toggle
    </Dropdown.Toggle>

    <Dropdown.Menu>
      <Dropdown.Item eventKey="1">Red</Dropdown.Item>
      <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
      <Dropdown.Item eventKey="3" active>
        Orange
      </Dropdown.Item>
      <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>,
);

Docs

John Zampa · Accepted Answer · 2021-09-19 08:10:30Z

You can easily add an icon to the dropdown button of react-bootstrap.

<NavDropdown title="Dropdown" id="collasible-nav-dropdown">

Change this code to the code given below:

<NavDropdown
    title={
        <span>
            <i className='fad fa-newspaper'></i> Dropdown
        </span>
    }
    id='collasible-nav-dropdown'>

Now your code will look like that.

<NavDropdown
    title={
        <span>
            <i className='fad fa-newspaper'></i> Dropdown
        </span>
    }
    id='collasible-nav-dropdown'>
    <NavDropdown.Item href='#action/3.1'>Action 1</NavDropdown.Item>
    <NavDropdown.Item href='#action/3.3'>Action 2</NavDropdown.Item>
</NavDropdown>

Note: The code I have shared is taken from react-bootstrap version 2.0.0. https://react-bootstrap.github.io/components/navbar/

CERFECTUS · Accepted Answer · 2019-10-29 05:29:13Z

2

here's with the Icon

<DropdownButton id="example-month-input-2" title= 
{this.state.weekselectedType}>
     <Dropdown.Item onClick={() => this.changeWeekValue('a')}><i 
 class="fa fa-chevron-down"></i></Dropdown.Item>
     <Dropdown.Item onClick={() => 
this.changeWeekValue('b')}>B</Dropdown.Item>
     <Dropdown.Item onClick={() => 
this.changeWeekValue('c')}>C</Dropdown.Item>
</DropdownButton>

font-awesome

answered Oct 29, 2019 at 5:29

CERFECTUS

4510 bronze badges

Collectives™ on Stack Overflow

Adding a icon to React Bootstrap Dropdown

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related