React Navbar

React Navbar - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap navbar is a horizontal navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

MDB provides you with stylish Navbars, with distinctive for Material Design details (such as shadows, living colors or charming wave effects triggered by clicking on the link). Apart from traditional, text links, Bootstraps Navbar might embed regular & social icons, dropdowns, avatars or search forms.

Basic example 

        
            
            import React, { Component } from "react";
            import {
              MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
              MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
            } from "mdbreact";
            import { BrowserRouter as Router } from 'react-router-dom';

            class NavbarPage extends Component {
            state = {
              isOpen: false
            };

            toggleCollapse = () => {
              this.setState({ isOpen: !this.state.isOpen });
            }

            render() {
              return (
                <Router>
                  <MDBNavbar color="indigo" dark expand="md">
                    <MDBNavbarBrand>
                      <strong className="white-text">Navbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Pricing</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <span className="mr-2">Dropdown</span>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu>
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBFormInline waves>
                            <div className="md-form my-0">
                              <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                            </div>
                          </MDBFormInline>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
                </Router>
                );
              }
            }

            export default NavbarPage;

Supported content 

        
            
            import React, { Component } from "react";
            import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBDropdown,
              MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon } from "mdbreact";
            import { BrowserRouter as Router } from 'react-router-dom';

            class NavbarPage extends Component {
            state = {
              isOpen: false
            };

            toggleCollapse = () => {
              this.setState({ isOpen: !this.state.isOpen });
            }

            render() {
              return (
                <Router>
                  <MDBNavbar color="default-color" dark expand="md">
                    <MDBNavbarBrand>
                      <strong className="white-text">Navbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Pricing</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <div className="d-none d-md-inline">Dropdown</div>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu className="dropdown-default">
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBNavLink className="waves-effect waves-light" to="#!">
                            <MDBIcon fab icon="twitter" />
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink className="waves-effect waves-light" to="#!">
                            <MDBIcon fab icon="google-plus-g" />
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <MDBIcon icon="user" />
                            </MDBDropdownToggle>
                            <MDBDropdownMenu className="dropdown-default">
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
                </Router>
                );
              }
            }

            export default NavbarPage;

React Navbar - API

In this section you will find advanced information about the Navbar component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Imports

        
            
          import React from 'react';
          import { MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse
          } from 'mdbreact';

API Reference: Navbar Properties

The table below shows the configuration options of the MDBNavbar component.

Name Type Default Description Example
className String Sets custom classes <MDBNavbar className="customClass" />
color String Sets navbars background color. Use mdb color palette <MDBNavbar color="indigo" />
dark Boolean false Change navbar's theme to dark (text color will be white) <MDBNavbar dark />
light Boolean false Change navbar's theme to light (text color will be black) <MDBNavbar ligth />
double Boolean false Allows navbar to be used along with SideNav <MDBNavbar double />
expand String "" Determines on which viewport navbar should be expanded. Accepts: xs, sm, md, lg, xl. If empty - navbar wont ever collapse. <MDBNavbar expand="md" />
fixed String Sets Navbar position to fixed. Use top or bottom values <MDBNavbar fixed="top" />
scrolling Boolean false Changes Navbar's size on scroll. Combine with prop transparent to achive color changing effect <MDBNavbar scrolling />
scrollingNavbarOffset Number 50 Number of pixels after which the Navbar changes 'scrolling' state <MDBNavbar scrollingNavbarOffset={100} />
tag String nav Changes default nav tag <MDBNavbar tag="div" />
transparent Boolean false Sets Navbar background to transparent. Combine with prop scrolling and color to achive color changing effect <MDBNavbar transparent />

API Reference: NavbarBrand Properties

The table below shows the configuration options of the MDBNavbarBrand component.

Name Type Default Description Example
className String Sets custom classes <MDBNavbarBrand className="customClass" />
href String Sets passed URL (component use react-router-dom) <MDBNavbarBrand href="./components/custom" />

API Reference: NavbarNav Properties

The table below shows the configuration options of the MDBNavbarNav component.

Name Type Default Description Example
className String Sets custom classes <MDBNavbarNav className="customClass" />
left Boolean false Pulls element to the left side of the Navbar <MDBNavbarNav left />
right Boolean false Pulls element to the right side of the Navbar <MDBNavbarNav right />
tag String ul Changes default nav tag <MDBNavbarNav tag="div" />

API Reference: NavItem Properties

The table below shows the configuration options of the MDBNavItem component.

Name Type Default Description Example
active Boolean false Sets active state of the NavItem <MDBNavItem active />
className String Sets custom classes <MDBNavItem className="customClass" />
tag String li Changes default nav tag <MDBNavItem tag="div" />

API Reference: NavbarToggler Properties

The table below shows the configuration options of the MDBNavbarToggler component.

Name Type Default Description Example
className String Sets custom classes <MDBNavbarToggler className="customClass" />
left Boolean false Pulls element to the left side of the Navbar <MDBNavbarToggler left />
image String Sets background-image of the toggler <MDBNavbarToggler image="../assest/image" />
right Boolean false Pulls element to the right side of the Navbar <MDBNavbarToggler right />
tag String button Changes default button tag <MDBNavbarToggler tag="button" />
type String button Changes elements type attribute <MDBNavbarToggler type="submit" />

API Reference: Collapse Properties

The table below shows the configuration options of the MDBCollapse component.

Name Type Default Description Example
className String Sets custom classes <MDBCollapse className="customClass" />
delay Object { show: 350, hide: 350 } Sets show and hide delays. If passed only a Number, both variables will adopt it <MDBCollapse delay={400} />
isOpen Boolean false Indicates if collapse is closed or opened <MDBCollapse isOpen={this.state.isOpen} />
navbar Boolean false Adjust component to work with navbar <MDBCollapse navbar />

API Reference: Collapse Methods

Name Parameters Description Example
onOpened Method which is called on collapse open-end <MDBCollapse onOpened={this.handleOnOpened} >
onClosed Method which is called on collapse close-end <MDBCollapse onClosed={this.handleOnClosed} ">

React Navbar - examples & customization

Quickly get a project started with any of our examples.

Color schemes 



        
            

          import React, { Component } from "react";
          import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
            MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBContainer } from "mdbreact";
          import { BrowserRouter as Router } from 'react-router-dom';

          class NavbarPage extends Component {
          state = {
            collapseID: ""
          };

          toggleCollapse = collapseID => () =>
            this.setState(prevState => ({
            collapseID: prevState.collapseID !== collapseID ? collapseID : ""
          }));

          render() {
            return (
              <Router>
                <MDBContainer>
                  <MDBNavbar color="red" dark expand="md" style={{ marginTop: "20px" }}>
                    <MDBNavbarBrand>
                      <strong className="white-text">MDBNavbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Pricing</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <div className="d-none d-md-inline">MDBDropdown</div>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu right>
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBFormInline waves>
                            <div className="md-form my-0">
                              <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                            </div>
                          </MDBFormInline>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
                  <MDBNavbar color="secondary-color" dark expand="md" style={{ marginTop: "20px" }}>
                    <MDBNavbarBrand>
                      <strong className="white-text">MDBNavbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Pricing</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <div className="d-none d-md-inline">MDBDropdown</div>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu right>
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBFormInline waves>
                            <div className="md-form my-0">
                              <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                            </div>
                          </MDBFormInline>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
                  <MDBNavbar color="default-color" light expand="md" style={{ marginTop: "20px" }}>
                    <MDBNavbarBrand>
                      <strong className="white-text">MDBNavbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Pricing</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <div className="d-none d-md-inline">MDBDropdown</div>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu right>
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBFormInline waves>
                            <div className="md-form my-0">
                              <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                            </div>
                          </MDBFormInline>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
                </MDBContainer>
              </Router>
              );
            }
          }

          export default NavbarPage;

Color schemes 

        
            
          import React, { Component } from "react";
          import { MDBNavbar, MDBNavbarBrand } from "mdbreact";

          class NavbarPage extends Component {
          state = {
            collapseID: ""
          };

          toggleCollapse = collapseID => () =>
            this.setState(prevState => ({
              collapseID: prevState.collapseID !== collapseID ? collapseID : ""
          }));

          render() {
            return (
                <MDBNavbar color="unique-color-dark" style={{ marginTop: "20px" }} dark>
                  <MDBNavbarBrand href="#">
                    <img src="https://mdbootstrap.com/img/logo/mdb-transparent.webp" height="30" alt="" />
                  </MDBNavbarBrand>
                </MDBNavbar>
              );
            }
          }

          export default NavbarPage;

Supported Content 

        
            
            import React, { Component } from "react";
            import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBDropdown,
              MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBContainer, MDBIcon } from "mdbreact";

            class NavbarPage extends Component {
            state = {
              collapseID: ""
            };

            toggleCollapse = collapseID => () =>
              this.setState(prevState => ({
              collapseID: prevState.collapseID !== collapseID ? collapseID : ""
            }));

            render() {
              return (
                <MDBContainer>
                  <MDBNavbar color="info-color" dark expand="md" style={{ marginTop: "20px" }}>
                    <MDBNavbarBrand>
                      <strong className="white-text">MDBNavbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBNavLink className="waves-effect waves-light" to="#!">
                            <MDBIcon icon="envelope" className="mr-1" />Contact</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink className="waves-effect waves-light" to="#!">
                            <MDBIcon icon="cog" className="mr-1" />Settings</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <MDBIcon icon="user" className="mr-1" />Profile
                            </MDBDropdownToggle>
                            <MDBDropdownMenu className="dropdown-default" right>
                              <MDBDropdownItem href="#!">My account</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Log out</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
                  <MDBNavbar color="secondary-color" dark expand="md" style={{ marginTop: "20px" }}>
                    <MDBNavbarBrand>
                      <strong className="white-text">MDBNavbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Pricing</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <div className="d-none d-md-inline">MDBDropdown</div>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu className="dropdown-default" right>
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBNavLink className="waves-effect waves-light d-flex align-items-center" to="#!">1
                            <MDBIcon icon="envelope" className="ml-1" />
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle className="dopdown-toggle" nav>
                              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp" className="rounded-circle z-depth-0"
                                style={{ height: "35px", padding: 0 }} alt="" />
                            </MDBDropdownToggle>
                            <MDBDropdownMenu className="dropdown-default" right>
                              <MDBDropdownItem href="#!">My account</MDBDropdownItem>
                              <MDBDropdownItem href="#!">Log out</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
                </MDBContainer>
                );
              }
            }

            export default NavbarPage;