Topic: MDBSideNav auto hides even with isOpen forced to true

Jean-Philippe Steinmetz free asked 2 years ago

Expected behavior

The MDBSideNav stays open at all times.

Actual behavior

When clicking "outside" of the navbar, it auto hides.

Resources (screenshots, code snippets etc.)


Krzysztof Wilk staff answered 2 years ago


To achieve that I think you can use these two sections in our documentation:

By using the mode property you can specify when you want to make the sidenav overlying the content or pushing it. The second approach is to add a little margin on the left side of the content (just to adjust the spacing between the page content and sidenav in the slim mode) and set the mode to overlay.

To change slim behavior you can use the state as it is shown in the documentation. Just add an onClick synthetic event to the container with your content that will change your slim mode to true (and possibly add a check if node isn't your sidenav). You can also use the addEventListener approach. Then do the same thing to your sidenav, but change your mode to false :)

Keep coding!

Jean-Philippe Steinmetz free commented 2 years ago

I've implemented most of this but it's still not working. When the page loads it'll render the slim navbar correctly and then when i interact with the content the sidenav completely hides itself again. It doesn't stay as it should. If I use the constant keyword as noted above then the content isn't interactable at all.

Jean-Philippe Steinmetz free commented 2 years ago

I noticed from the examples I was missing the getOpenState. When I add this property setter the sidenav does properly stay visible at all times now but the content is again blocked from interaction.

Krzysztof Wilk staff commented 2 years ago

Is it possible to share your code with me? I.e. simple GitHub project or just paste your code below :)

Jean-Philippe Steinmetz free commented 2 years ago

Sure. First, all the code is written as React classes, not functions.

In my MainLayout class I have the following.

                getOpenState={(e) => this.setState({...this.state, sidebarVisible: e})}
            <MDBContainer fluid
                <Header />
                <section style={{ 'padding-top': '10mm', height: '100vh'}}>
                <Footer />

In the Sidebar class I have.

            <div className='text-center'>
                <img src={icon} className='sidenav-slim' width='100%' style={{ padding: '2.5mm'}}/>
                <img src={logo} className='sidenav-non-slim' width='100%' style={{ padding: '2.5mm'}}/>
            <MDBScrollbar sidenav tag='ul' suppressScrollX style={{ height: '75%' }}>
            <div className='text-center' style={{ minHeight: '3rem' }}>

In the above, sidebarVisible should always be true and sidebarSlim is intended to be toggled when actively focused on the content container.

Krzysztof Wilk staff answered 2 years ago


Try this code:

import React from "react";

import { MDBContainer, MDBSideNav } from "mdb-react-ui-kit";

class App extends React.Component {
  constructor(props) {
    this.state = { isSlim: true };

  render() {
    return (
          onClick={() => this.setState({ isSlim: false })}
          Sidenav test
          style={{ height: "100%" }}
          onClick={() => this.setState({ isSlim: true })}
          Test content

export default App;

Did you mean it?

Keep coding!

Jean-Philippe Steinmetz free commented 2 years ago

It works! Thank you!

Krzysztof Wilk staff commented 2 years ago

No problem, if you have more questions - feel free to ask :)

I have a new problem. With the constant property the content window is now unusable.

Here's what i'm trying to accomplish. I would like the SideNavBar to always be visible and anchored on the left side of the page. I'd like it to toggle between slim mode and full mode. In slim mode, it would not obstruct any content to the right. In full mode, it can overlay the content to the right to show the full menu. When you click on the content, it would automatically switch to slim mode.

The docs seem to have only basic examples of how this might be accomplished. Are there any more complete examples? I have downloaded mdb-react-admin-pro template but noticed that it doesn't use the Pro the same ui kit (its based on mdbreact, not mdb-react-ui-kit) and has completely different components which aren't compatibe.

Krzysztof Wilk staff answered 2 years ago


Add a constant property to this component. It will prevent hiding the sidenav after clicking outside :)

Keep coding!

Jean-Philippe Steinmetz free commented 2 years ago

I tried this and it doesn't appear to work.

Jean-Philippe Steinmetz free commented 2 years ago

Nevermind, apparently I can't type 'constant' correctly. It's working now!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.3.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No