Topic: MDB React Navbar Toggler Not Expanding Menu on Small Screens
Jiří Janda
priority
asked 3 days ago
Description:
I am experiencing an issue with the MDB React Navbar Toggler in my project. When I click the toggler button on smaller screens (below the expand="lg" breakpoint), the menu does not expand as expected. However, the toggler does trigger the showNav state change, as confirmed by console.log.
Expected Behavior:
When clicking the hamburger icon, the navbar menu should expand and become visible on small screens.
Actual Behavior:
The toggler button registers the click (verified via logging).
The showNav state updates correctly (from false to true).
Despite this, the menu does not appear on the screen.
What I have checked so far:
✔️ The showNav state correctly updates (verified via console.log).
✔️ The correct MDB styles are imported (import 'mdb-react-ui-kit/dist/css/mdb.min.css';).
✔️ The tag is present in index.html.
✔️ There are no custom CSS rules overriding .collapse or .show.
✔️ The project is using mdb-react-ui-kit@9.0.0 and react@18.3.1 (verified via npm ls).
Code Sample:
import React, { useState, useEffect } from 'react';
import {
MDBNavbar,
MDBContainer,
MDBIcon,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBNavbarToggler,
MDBNavbarBrand,
MDBCollapse
} from 'mdb-react-ui-kit';
function App() {
const [showNav, setShowNav] = useState(false);
useEffect(() => {
console.log('showNav changed ->', showNav);
}, [showNav]);
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarBrand href='#'>MDB React App</MDBNavbarBrand>
<MDBNavbarToggler onClick={() => setShowNav(!showNav)}>
<MDBIcon icon='bars' fas />
</MDBNavbarToggler>
<MDBCollapse navbar show={showNav}>
<MDBNavbarNav className='justify-content-center'>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Home</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Link</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar> ); }
export default App;
Questions:
1.Are there any known issues with MDBCollapse or MDBNavbarToggler in mdb-react-ui-kit@9.0.0?
2.Are there additional required dependencies for the toggler to function correctly?
3.Could there be a problem with the way styles are applied to .collapse and .show in MDB v9?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 9.0.0
- Device: Desktop
- Browser: Google Chrome 133.0.6943.143 (64bit)
- OS: WindowsProductName Windows: 10 Pro; WindowsVersion: 2009 OsBuildNumber: 26100
- Provided sample code: No
- Provided link: No
Mateusz Lazaru staff commented 3 days ago
MDBCollapse has changed the
show
prop toopen
. Having it changed should fix the problem.Jiří Janda priority commented 3 days ago
Thanks to Mateusz Lazar and his comment: "MDBCollapse has changed the show prop to open. Changing it should fix the problem," the issue is now resolved and the menu is working. Thank you very much.