Topic: React Sidebar - How to make it open by default and without dark overlay?

tomasz1253 pro asked 4 years ago

Hi! I want to build SideNav with React MDBootstrap PRO.  For example something like on Example provided on has dark overlay and is not opened by default. How to make it work like on Or at least opened by default without dark overlay?

Anna Morawska staff answered 4 years ago

Hey there, you can add fixed prop to Sidenav component, and add custom classes in className attrubutre. Please try this:
import React from 'react';

import { BrowserRouter as Router } from 'react-router-dom';

import { Fa, SideNavCat, SideNavNav, SideNav, SideNavLink, Container, Row } from 'mdbreact';

class SideNavPage extends React.Component {

constructor(props) {






handleToggleClickA= () => {





render() {

return (




breakWidth={1300}className="blue lighten-4">










<SideNavCatid="1"name="Submit blog"icon="chevron-right">

<SideNavLink>Submit listing</SideNavLink>

<SideNavLink>Registration form</SideNavLink>



<SideNavLink>For bloggers</SideNavLink>

<SideNavLink>For authors</SideNavLink>




<SideNavLink>Monthly meetings</SideNavLink>


<SideNavCatid="4"name="Contact me"icon="envelope-o">


<SideNavLink>Write a message</SideNavLink>









export default SideNavPage;

tomasz1253 pro commented 4 years ago

Adding hidden and fixed helped! :) Thank you very much :)

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

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes