React-Bootstrap dropdown on hover
12,839
Solution 1
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.
Solution 2
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;
}
Solution 3
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>
);
Author by
RussellHarrower
Self taught PHP, HTML, CSS, JAVASCRIPT developer.
Updated on July 28, 2022Comments
-
RussellHarrower almost 2 years
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.