Topic: Navbar Dropdown is not working in colapsed mode
arooly pro asked 5 years ago
Hi,
I am using the example from: https://mdbootstrap.com/docs/react/navigation/navbar/
Basic Example.
Hamburger Menu works only for level one, Dropdown is not working in collapsed mode.
To test just use the Basic Example Code on your page.
arooly pro answered 5 years ago
Hi Ana thank you for the prompt answer, your fix solves the problem
I am using MDBreact 4.9 from my date is 25/01/2019 in the recommended implementation the title didn't show up:
<MDBDropdownToggle nav caret>
<div className="d-none d-md-inline">MDBDropdown</div>
Your fix work using "span" instead of "div" solved the problem.
<MDBDropdownToggle nav caret>
<span className="mr-2">Dropdown</span>
Grf free answered 5 years ago
Are you aware that the dropdown menu also doesn't work in the jQuery pro version. Please check Dropdown menu jQuery
Anna Morawska staff answered 5 years ago
Hi arooly,
could you explain more fully, what do you mean "Hamburger Menu works only for level one" ?
Refering to the dropdown issue, please try this code:
import React, { Component } from "react";
import {
MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
} from "mdbreact";
class NavbarPage extends Component {
state = {
isOpen: false
};
toggleCollapse = () => {
this.setState({ isOpen: !this.state.isOpen });
}
render() {
return (
<MDBNavbar color="indigo" dark expand="md">
<MDBNavbarBrand>
<strong className="white-text">Navbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.toggleCollapse} />
<MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#!">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">Features</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">Pricing</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
<span className="mr-2">Dropdown</span>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="#!">Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className="md-form my-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
);
}
}
export default NavbarPage;
Anna Morawska staff answered 5 years ago
Hi there,
thank you for reporting this - we will try to fix this before the next release.
Best, Ania
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: PC
- Browser: Chrome, Firefox
- OS: Windows
- Provided sample code: No
- Provided link: Yes