Why doesn't my dropdown from React Bootstrap close

Question

I'm trying to use a dropdown menu from React-Bootstrap and can't make it work. It doesn't close (and it's not vertical, only if I use CSS with display: flex and flex-direction: column)(I'm using 2.10.7 version) :

It's inside a div. When i click a second time on i, it turns like this:

Here is the code:

function DropdownMenu() {
    return (
        <Dropdown>
            <Dropdown.Toggle className={styles.dropdowntoggle} variant="success" id="dropdown-basic">
                Dropdown Button
            </Dropdown.Toggle>

            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

export default DropdownMenu;

The only css used is the background color on the Dropdown.Toggle.

I have tried using the simplified version. I've tried using onToggle and onClick with a "show" state, using the show prop. Doesn't work.

I've installed React Bootstrap and Bootstrap.

Edit: styles.dropdowntoggle is for the use of CSS on this component.

autoClose prop doesn't work either.

"Edit: styles.dropdowntoggle is for the use of CSS on this component.", give the value assigned to styles.dropdowntoggle — Sam, Commented Jan 20 at 23:02

Sam · Accepted Answer · 2025-01-20 22:59:20Z

0

Make sure to import bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';

You'll need to install in if you haven't

npm install bootstrap

If I use your code (and take out className={styles.dropdowntoggle} and import bootstrap like above, it looks like

Also

className={styles.dropdowntoggle}

should be

style={styles.dropdowntoggle}

or className="..."

answered Jan 20 at 22:59

Sam

2,41917 gold badges99 silver badges211 bronze badges

It works perfectly with "import 'bootstrap/dist/css/bootstrap.min.css';", thank you. className={styles.dropdowntoggle} is correct, though; I use it for the rest of my project. Also, it doesn't affect the dropdown in my case.
– david33
Commented Jan 21 at 13:01
@david33 ok, please mark the answer as correct, and no className={styles.dropdowntoggle} is not correct, unless you have styles.dropdowntoggle set to a string
– Sam
Commented Jan 21 at 23:55
I use a Previews.module.css file then className={styles.dropdowntoggle} it works perfectly fine.
– david33
Commented Jan 23 at 15:46

Add a comment |

Collectives™ on Stack Overflow

Why doesn't my dropdown from React Bootstrap close

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related