Topic: How to create NavBar Item without dropdown
                  
                  gaurav soni
                  pro
                  asked 6 years ago
                
Expected behavior
How can we add a NabBar item without the dropdown ? Like a single item. There is no example for this in react.
Using just the <MDBSideNavLink>Submit listing</MDBSideNavLink> inside <MDBSideNavNav>  does not work properly.
Actual behavior
Resources (screenshots, code snippets etc.)
                      
                      Anna Morawska
                      staff
                        answered 6 years ago
                    
Hi there,
You should use topLevel prop on an MDBSidenavLink component.  Please check out the example below:
import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBSideNavLink, MDBContainer, MDBIcon, MDBBtn } from "mdbreact";
class SideNavPage extends Component {
  state = {
    sideNavLeft: false,
  }
  sidenavToggle = sidenavId => () => {
    const sidenavNr = `sideNav${sidenavId}`
    this.setState({
      [sidenavNr]: !this.state[sidenavNr]
    });
  };
  render() {
    return (
      <Router>
        <MDBContainer>
          <MDBBtn onClick={this.sidenavToggle("Left")}><MDBIcon size="lg" icon="bars" /></MDBBtn>
          <MDBSideNav
            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
            hidden
            triggerOpening={this.state.sideNavLeft}
            breakWidth={1300}
            className="deep-purple darken-4"
          >
            <MDBSideNavNav>
              <MDBSideNavLink to="/other-page" topLevel><MDBIcon icon="pencil-alt" className="mr-2" />Submit listing</MDBSideNavLink>
              <MDBSideNavCat
                name="Submit blog"
                id="submit-blog"
                icon="chevron-right"
              >
                <MDBSideNavLink>Submit listing</MDBSideNavLink>
                <MDBSideNavLink>Registration form</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat
                name="Instruction"
                id="instruction"
                icon="hand-pointer"
                href="#"
              >
                <MDBSideNavLink>For bloggers</MDBSideNavLink>
                <MDBSideNavLink>For authors</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat name="About" id="about" icon="eye">
                <MDBSideNavLink>Instruction</MDBSideNavLink>
                <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat name="Contact me" id="contact-me" icon="envelope">
                <MDBSideNavLink>FAQ</MDBSideNavLink>
                <MDBSideNavLink>Write a message</MDBSideNavLink>
              </MDBSideNavCat>
            </MDBSideNavNav>
          </MDBSideNav>
        </MDBContainer>
      </Router>
    );
  }
}
export default SideNavPage;
                    
                      FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
 - Premium support: No
 - Technology: MDB React
 - MDB Version: 4.11.1
 - Device: mac
 - Browser: chrome
 - OS: mohave
 - Provided sample code: Yes
 - Provided link: No