React-Bootstrap dropdown on hover

5
votes

I am working on my first react-bootstrap website and I am noticing that the dropdown in navbar won't allow dropdown on hover.

I am wondering if there is a workaround. I tried adding some code to my CSS. demo - https://codesandbox.io/s/react-bootstrap-nav-active-link-5v5jq?fontsize=14&hidenavigation=1&theme=dark

/*MENU*/
.dropdown:hover {
  display: block;
}
/*END MENU*/

However, this did not work

This is the code.

import React from 'react';
import {Nav, Navbar, NavDropdown } from 'react-bootstrap';
import '../App.css';

function Header() {
    return (
            <Navbar bg="transparent" variant="dark" expand="lg">
            <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#link">Link</Nav.Link>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown" alignRight>
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
                </Nav>

            </Navbar.Collapse>
            </Navbar>
    )
}
export default Header;

even tried this

const Header = props => {
    const { location } = props;
    const [isOpen, updateIsOpen] = useState(false);
    return (
        <Navbar bg="transparent" variant="dark" expand="lg">
        <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto" activeKey={location.pathname}>
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/advertisers">Advertisers</Nav.Link>
            <NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
             onMouseOver={() => updateIsOpen(true)}
             onFocus={() => updateIsOpen(true)}
             onMouseLeave={() => updateIsOpen(false)}
             onBlur={() => updateIsOpen(false)}
             toggle={() => updateIsOpen(!isOpen)}
             isOpen={isOpen}>
                <NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
            </NavDropdown>
            <Nav.Link href="/case-studies">Case Studies</Nav.Link>
            <Nav.Link href="/contact">Contact</Nav.Link>
            </Nav>

        </Navbar.Collapse>
        </Navbar>
    );
  };
  const HeaderWithRouter = withRouter(Header);
  export default HeaderWithRouter;

But no success.

5
reactjsbootstrap-4react-bootstrap
where is your dropdown class in the dom ?? - Akhil Aravind
I thought I did not need to add it as a custom className as I was using a bootstrap class they already use. - or do I still need to add it? - RussellHarrower
@AkhilAravind I added className="dropdown" and it did not work - RussellHarrower
@ can you create a stackblitz demo and share link, i will check - Akhil Aravind
Check if this helps you - github.com/reactstrap/reactstrap/issues/1088 - Arpitha Chandrashekara

5 Answers

14
votes
const [show, setShow] = useState(false);
const showDropdown = (e)=>{
    setShow(!show);
}
const hideDropdown = e => {
    setShow(false);
}

  <NavDropdown title="Dropdown" 
   id="collasible-nav-dropdown" 
   show={show}
   onMouseEnter={showDropdown} 
   onMouseLeave={hideDropdown}
   >

I Have Used This For Open Dropdown Menu On Hover in React Bootstrap.

2
votes

It doesn't render the dropdown menu when the NavDropdown component mounts for the first time.

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;
}
0
votes

Add the below code to the css, Checked in sandbox and worked fine. Let me know if you still have issue.

Check the sandbox snippet Here

.nav-item:hover .dropdown-menu{
  display:block!important
}
0
votes

This should work:

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
0
votes

Use this code.

  const [showDropdown, setShowDropdown] = useState(false);
  return (
    <Dropdown
      onMouseLeave={() => setShowDropdown(false)}
      onMouseOver={() => setShowDropdown(true)}
      style={{ width: '166px' }}
    >
      <Dropdown.Toggle
        className="main-style"
        id="dropdown-basic"
      >
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu show={showDropdown}>
        <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>
  );

Codesandbox