Rate this docs

React Bootstrap Navbar

React Navbar - Bootstrap 4 & Material Design

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 from "react";
          import { Navbar, NavbarBrand, NavbarNav, NavItem, NavLink, NavbarToggler, Collapse, FormInline, Dropdown, DropdownToggle, DropdownMenu,  DropdownItem } from "mdbreact";

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

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

            render() {
              return (

                <Navbar color="indigo" dark expand="md">
                    <NavbarBrand>
                      <strong className="white-text">Navbar</strong>
                    </NavbarBrand>
                    <NavbarToggler
                      onClick={this.toggleCollapse}
                    />
                    <Collapse
                      id="navbarCollapse3"
                      isOpen={this.state.isOpen}
                      navbar
                    >
                      <NavbarNav left>
                        <NavItem active>
                          <NavLink to="#!">Home</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink to="#!">Features</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink to="#!">Pricing</NavLink>
                        </NavItem>
                        <NavItem>
                          <Dropdown>
                            <DropdownToggle nav caret>
                              <div className="d-none d-md-inline">Dropdown</div>
                            </DropdownToggle>
                            <DropdownMenu right>
                              <DropdownItem href="#!">Action</DropdownItem>
                              <DropdownItem href="#!">Another Action</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                            </DropdownMenu>
                          </Dropdown>
                        </NavItem>
                      </NavbarNav>
                      <NavbarNav right>
                        <NavItem>
                          <FormInline waves>
                            <div className="md-form my-0">
                              <input
                                className="form-control mr-sm-2"
                                type="text"
                                placeholder="Search"
                                aria-label="Search"
                              />
                            </div>
                          </FormInline>
                        </NavItem>
                      </NavbarNav>
                    </Collapse>
                </Navbar>
              );
            }
          }

          export default NavbarPage;

      

Supported content



          import React from "react";
          import { Navbar, NavbarBrand, NavbarNav, NavItem, NavLink, NavbarToggler, Collapse, FormInline, Dropdown, DropdownToggle, DropdownMenu,  DropdownItem, Fa } from "mdbreact";

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

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

            render() {
              return (
                <Navbar color="default-color" dark expand="md" style={{marginTop: "20px"}}>
                    <NavbarBrand>
                      <strong className="white-text">Navbar</strong>
                    </NavbarBrand>
                    <NavbarToggler
                      onClick={this.toggleCollapse}
                    />
                    <Collapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
                      <NavbarNav left>
                        <NavItem active>
                          <NavLink to="#!">Home</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink to="#!">Features</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink to="#!">Pricing</NavLink>
                        </NavItem>
                        <NavItem>
                          <Dropdown>
                            <DropdownToggle  nav caret>
                              <div className="d-none d-md-inline">Dropdown</div>
                            </DropdownToggle>
                            <DropdownMenu className="dropdown-default"right>
                              <DropdownItem href="#!">Action</DropdownItem>
                              <DropdownItem href="#!">Another Action</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                            </DropdownMenu>
                          </Dropdown>
                        </NavItem>
                      </NavbarNav>
                      <NavbarNav right>
                        <NavItem>
                          <NavLink className="waves-effect waves-light" to="#!"><Fa icon="twitter" /></NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink className="waves-effect waves-light" to="#!"><Fa icon="google-plus" /></NavLink>
                        </NavItem>
                        <NavItem>
                          <Dropdown>
                            <DropdownToggle nav caret>
                              <Fa icon="user" />
                            </DropdownToggle>
                            <DropdownMenu className="dropdown-default" right>
                              <DropdownItem href="#!">Action</DropdownItem>
                              <DropdownItem href="#!">Another Action</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                            </DropdownMenu>
                          </Dropdown>
                        </NavItem>
                      </NavbarNav>
                    </Collapse>
                </Navbar>
              );
            }
          }

          export default NavbarPage;

      

React Bootstrap 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 />
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 from "react";
          import { Navbar, NavbarBrand, NavbarNav, NavItem, NavLink, NavbarToggler, Collapse, FormInline, Dropdown, DropdownToggle, DropdownMenu,  DropdownItem, Container } from "mdbreact";


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

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

            render() {
              return (
                <Container>
                  <Navbar color="red" dark expand="md" style={{marginTop: "20px"}}>
                    <NavbarBrand>
                      <strong className="white-text">Navbar</strong>
                    </NavbarBrand>
                    <NavbarToggler
                      onClick={this.toggleCollapse("navbarCollapse3")}
                    />
                    <Collapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                      <NavbarNav left>
                        <NavItem active>
                          <NavLink to="#!">Home</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink to="#!">Features</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink to="#!">Pricing</NavLink>
                        </NavItem>
                        <NavItem>
                          <Dropdown>
                            <DropdownToggle nav caret>
                              <div className="d-none d-md-inline">Dropdown</div>
                            </DropdownToggle>
                            <DropdownMenu right>
                              <DropdownItem href="#!">Action</DropdownItem>
                              <DropdownItem href="#!">Another Action</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                              <DropdownItem href="#!">Something else here</DropdownItem>
                            </DropdownMenu>
                          </Dropdown>
                        </NavItem>
                      </NavbarNav>
                      <NavbarNav right>
                        <NavItem>
                          <FormInline waves>
                            <div className="md-form my-0">
                              <input
                                className="form-control mr-sm-2"
                                type="text"
                                placeholder="Search"
                                aria-label="Search"
                              />
                            </div>
                          </FormInline>
                        </NavItem>
                      </NavbarNav>
                    </Collapse>
                  </Navbar>
                  <Navbar color="secondary-color" dark expand="md" style={{marginTop: "20px"}}>
                  <NavbarBrand>
                    <strong className="white-text">Navbar</strong>
                  </NavbarBrand>
                  <NavbarToggler
                    onClick={this.toggleCollapse("navbarCollapse3")}
                  />
                  <Collapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                    <NavbarNav left>
                      <NavItem active>
                        <NavLink to="#!">Home</NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#!">Features</NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#!">Pricing</NavLink>
                      </NavItem>
                      <NavItem>
                        <Dropdown>
                          <DropdownToggle nav caret>
                            <div className="d-none d-md-inline">Dropdown</div>
                          </DropdownToggle>
                          <DropdownMenu right>
                            <DropdownItem href="#!">Action</DropdownItem>
                            <DropdownItem href="#!">Another Action</DropdownItem>
                            <DropdownItem href="#!">Something else here</DropdownItem>
                            <DropdownItem href="#!">Something else here</DropdownItem>
                          </DropdownMenu>
                        </Dropdown>
                      </NavItem>
                    </NavbarNav>
                    <NavbarNav right>
                      <NavItem>
                        <FormInline waves>
                          <div className="md-form my-0">
                            <input
                              className="form-control mr-sm-2"
                              type="text"
                              placeholder="Search"
                              aria-label="Search"
                            />
                          </div>
                        </FormInline>
                      </NavItem>
                    </NavbarNav>
                  </Collapse>
                </Navbar>
                <Navbar color="default-color" light expand="md" style={{marginTop: "20px"}}>
                <NavbarBrand>
                  <strong className="white-text">Navbar</strong>
                </NavbarBrand>
                <NavbarToggler
                  onClick={this.toggleCollapse("navbarCollapse3")}
                />
                <Collapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                  <NavbarNav left>
                    <NavItem active>
                      <NavLink to="#!">Home</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink to="#!">Features</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink to="#!">Pricing</NavLink>
                    </NavItem>
                    <NavItem>
                      <Dropdown>
                        <DropdownToggle nav caret>
                          <div className="d-none d-md-inline">Dropdown</div>
                        </DropdownToggle>
                        <DropdownMenu right>
                          <DropdownItem href="#!">Action</DropdownItem>
                          <DropdownItem href="#!">Another Action</DropdownItem>
                          <DropdownItem href="#!">Something else here</DropdownItem>
                          <DropdownItem href="#!">Something else here</DropdownItem>
                        </DropdownMenu>
                      </Dropdown>
                    </NavItem>
                  </NavbarNav>
                  <NavbarNav right>
                    <NavItem>
                      <FormInline waves>
                        <div className="md-form my-0">
                          <input
                            className="form-control mr-sm-2"
                            type="text"
                            placeholder="Search"
                            aria-label="Search"
                          />
                        </div>
                      </FormInline>
                    </NavItem>
                  </NavbarNav>
                </Collapse>
              </Navbar>
            </Container>

              );
            }
          }

          export default NavbarPage;


      

Color schemes



          import React from "react";
          import { Navbar, NavbarBrand} from "mdbreact";

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

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

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

          export default NavbarPage;


      

Supported Content



            import React from "react";
            import { Navbar, NavbarBrand, NavbarNav, NavItem, NavLink, NavbarToggler, Collapse,  Dropdown, DropdownToggle, DropdownMenu,  DropdownItem, Container, Fa } from "mdbreact";

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

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

              render() {
                return (
                  <Container>
                      <Navbar color="info-color" dark expand="md" style={{marginTop: "20px"}}>
                        <NavbarBrand>
                          <strong className="white-text">Navbar</strong>
                        </NavbarBrand>
                        <NavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
                        <Collapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                          <NavbarNav right>
                            <NavItem>
                              <NavLink className="waves-effect waves-light" to="#!"><Fa icon="envelope" className="mr-1" />Contact</NavLink>
                            </NavItem>
                            <NavItem>
                              <NavLink className="waves-effect waves-light" to="#!"><Fa icon="gear" className="mr-1" />Settings</NavLink>
                            </NavItem>
                            <NavItem>
                              <Dropdown>
                                <DropdownToggle nav caret>
                                  <Fa icon="user" className="mr-1" />Profile
                                </DropdownToggle>
                                <DropdownMenu className="dropdown-default" right>
                                  <DropdownItem href="#!">My account</DropdownItem>
                                  <DropdownItem href="#!">Log out</DropdownItem>
                                </DropdownMenu>
                              </Dropdown>
                            </NavItem>
                          </NavbarNav>
                        </Collapse>
                      </Navbar>
                      <Navbar color="secondary-color" dark expand="md" style={{marginTop: "20px"}}>
                        <NavbarBrand>
                          <strong className="white-text">Navbar</strong>
                        </NavbarBrand>
                        <NavbarToggler onClick={this.toggleCollapse("navbarCollapse3")} />
                        <Collapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                          <NavbarNav left>
                            <NavItem active>
                              <NavLink to="#!">Home</NavLink>
                            </NavItem>
                            <NavItem>
                              <NavLink to="#!">Features</NavLink>
                            </NavItem>
                            <NavItem>
                              <NavLink to="#!">Pricing</NavLink>
                            </NavItem>
                            <NavItem>
                              <Dropdown>
                                <DropdownToggle  nav caret>
                                  <div className="d-none d-md-inline">Dropdown</div>
                                </DropdownToggle>
                                <DropdownMenu className="dropdown-default"right>
                                  <DropdownItem href="#!">Action</DropdownItem>
                                  <DropdownItem href="#!">Another Action</DropdownItem>
                                  <DropdownItem href="#!">Something else here</DropdownItem>
                                  <DropdownItem href="#!">Something else here</DropdownItem>
                                </DropdownMenu>
                              </Dropdown>
                            </NavItem>
                          </NavbarNav>
                          <NavbarNav right>
                            <NavItem>
                              <NavLink className="waves-effect waves-light d-flex align-items-center" to="#!">1<Fa icon="envelope" className="ml-1" /></NavLink>
                            </NavItem>
                            <NavItem>
                              <Dropdown>
                                <DropdownToggle className="dopdown-toggle" nav>
                                  <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" className="rounded-circle z-depth-0" style={{height: "35px", padding: 0}} alt="" />
                                </DropdownToggle>
                                <DropdownMenu className="dropdown-default" right>
                                  <DropdownItem href="#!">My account</DropdownItem>
                                  <DropdownItem href="#!">Log out</DropdownItem>
                                </DropdownMenu>
                              </Dropdown>
                            </NavItem>
                          </NavbarNav>
                        </Collapse>
                      </Navbar>
                  </Container>
                );
              }
            }

            export default NavbarPage;