Making a React Bootstrap NavDropdown dropdown when hovered over

user_3472360 0
Viewed 1782

I'm trying to have a dropdown menu bar in React Bootstrap show the options when you hover over it. I've looked everywhere and all the solutions seem out of date and not to work, please let me know if you are able to solve this problem.

Here is the dropdown menu I am trying to apply the change to: 

<Navbar>
  <NavDropdown title="Dropdown Menu">
    <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
    <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
  </NavDropdown>
</Navbar>

and here is a sandbox of the above code.

bootstrap-4 reactjs css html
2 Answers

You can use show prop

import React, { Component, Fragment, useState } from "react";
import ReactDOM from "react-dom";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";

const Header = props => {
  const [show, setShow] = useState(false);
  return (
    <Navbar>
      <NavDropdown
        title="Dropdown Menu"
        show={show}
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
      </NavDropdown>
    </Navbar>
  );
};

function App() {
  return <Header />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

check here codeSandBox

user_116030040

CSS Solution: You just need to add renderMenuOnMount={true} on your NavDropdown element like this:

<NavDropdown title={name} id={name} renderMenuOnMount={true}>
...menu items...
</NavDropdown>

And in CSS:

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
user_74175410
Related