Thanks for the help on this. I hadn't spotted my typo.

I added the onclick and that works fine - thanks. Here is the sample code showing the strange behaviour of the sidebar when I hover over or click an item.

And the sidebar looks like this:

If I hover over Test or Test 2 or Not Found - only Test 2 actually shows the hover effect - like this:

Neither Test or Not Found show any hover effect at all.

If I click on Test2 - it displays the test screen but the TEST2 menu item remains highlighted like this:

<MDBSideNavLink
  onClick={this.handleToggleClickA}
  to="/"
  exact
  topLevel
  className="mr-2"
>

Thanks for the above example. It helps.

However, I have another question open with Support on the use of MDBSideNavItem as it doesn't appear to be documented anywhere.

I will send you the sample code of the menu line remaining highlighted for you to take a look at.

Hi @davidkjackson,

If you use this code in your project, you can use window.addEventListener("click", this.yourFunction) or onClick event to close MDBSideNav

For example, in this code, we have toggleStateA state. And we have this function.

  close = () => {
    this.setState({
      toggleStateA: !this.state.toggleStateA
    });
  };

Now, we can add this function for onClick event in <MDBSideNavItem>Submit listing</MDBSideNavItem>

Like this.

...
<MDBSideNavCat
    name="Submit blog"
    id="submit-blog-cat"
    icon="chevron-right"
>
    <MDBSideNavItem onClick={this.handleToggleClickA}>Submit listing</MDBSideNavItem>
    <MDBSideNavItem onClick={this.handleToggleClickA}>Registration form</MDBSideNavItem>
</MDBSideNavCat>
...

Now, when we click for this item this is automatically close.

Also, when using MDBSideNavLink, the line in the sidenav remains highlighted even if I click on another item.

Can you send me your code? I will try to help you.

Best, Konrad.