Navbar

React Bootstrap 5 Navbar component

Documentation and examples for powerful, responsive navigation header - MDB navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Basic example

A basic example of the navbar with the most common elements like link, search form, brand, and dropdown. All of them are explained in detail in the supported content section.

Note: this example uses color (bg-light) and spacing (my-2, my-lg-0, me-sm-0, my-sm-0) utility classes. 

        
            
          import React, { useState } from 'react';
          import { 
            MDBContainer,
            MDBNavbar, 
            MDBNavbarBrand, 
            MDBNavbarToggler,
            MDBIcon,
            MDBNavbarNav,
            MDBNavbarItem,
            MDBNavbarLink,
            MDBBtn,
            MDBDropdown,
            MDBDropdownToggle,
            MDBDropdownMenu,
            MDBDropdownItem,
            MDBDropdownLink,
            MDBCollapse
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [showBasic, setShowBasic] = useState(false);
            
            return (
              <MDBNavbar expand='lg' light bgColor='light'>
                <MDBContainer fluid>
                  <MDBNavbarBrand href='#'>Brand</MDBNavbarBrand>
  
                  <MDBNavbarToggler
                    aria-controls='navbarSupportedContent'
                    aria-expanded='false'
                    aria-label='Toggle navigation'
                    onClick={() => setShowBasic(!showBasic)}
                  >
                    <MDBIcon icon='bars' fas />
                  </MDBNavbarToggler>
  
                  <MDBCollapse navbar show={showBasic}>
                    <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
                      <MDBNavbarItem>
                        <MDBNavbarLink active aria-current='page' href='#'>
                          Home
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>Link</MDBNavbarLink>
                      </MDBNavbarItem>
  
                      <MDBNavbarItem>
                        <MDBDropdown>
                          <MDBDropdownToggle tag='a' className='nav-link'>
                            Dropdown
                          </MDBDropdownToggle>
                          <MDBDropdownMenu>
                            <MDBDropdownItem>
                              <MDBDropdownLink>Action</MDBDropdownLink>
                            </MDBDropdownItem>
                            <MDBDropdownItem>
                              <MDBDropdownLink>Another action</MDBDropdownLink>
                            </MDBDropdownItem>
                            <MDBDropdownItem>
                              <MDBDropdownLink>Something else here</MDBDropdownLink>
                            </MDBDropdownItem>
                          </MDBDropdownMenu>
                        </MDBDropdown>
                      </MDBNavbarItem>
  
                      <MDBNavbarItem>
                        <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                          Disabled
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                    </MDBNavbarNav>
  
                    <form className='d-flex input-group w-auto'>
                      <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                      <MDBBtn color='primary'>Search</MDBBtn>
                    </form>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>
            );
          }

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-brand for your company, product, or project name.
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • Flex and spacing utilities for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Apart from listed above, navbar supports also components like breadcrumbs, forms, buttons, icons, flags, avatars, badges, and a few more.

Brand

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. 


        
            
            import React from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBNavbarBrand
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBNavbar light bgColor='light'>
                    <MDBContainer fluid>
                      <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                    </MDBContainer>
                  </MDBNavbar>
    
                  <br />
    
                  <MDBNavbar light bgColor='light'>
                    <MDBContainer fluid>
                      <MDBNavbarBrand tag="span" className='mb-0 h1'>Navbar</MDBNavbarBrand>
                    </MDBContainer>
                  </MDBNavbar>
                </>
              );
            }

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate. 

        
            
            import React from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBNavbarBrand
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBNavbar light bgColor='light'>
                    <MDBContainer>
                      <MDBNavbarBrand href='#'>
                        <img
                          src='https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp'
                          height='30'
                          alt=''
                          loading='lazy'
                        />
                      </MDBNavbarBrand>
                    </MDBContainer>
                  </MDBNavbar>
                </>
              );
            }
          
        
    
        
            
            import React from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBNavbarBrand
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <>
                  <MDBNavbar light bgColor='light'>
                    <MDBContainer fluid>
                      <MDBNavbarBrand href='#'>
                        <img
                          src='https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp'
                          height='30'
                          alt=''
                          loading='lazy'
                        />
                        MDBootstrap
                      </MDBNavbarBrand>
                    </MDBContainer>
                  </MDBNavbar>
                </>
              );
            }

Nav

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Active states—with .active—to indicate the current page can be applied directly to .nav-links or their immediate parent .nav-items.

Please note that you should also add the aria-current attribute on the .nav-link itself. 

        
            
            import React, { useState } from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBNavbarBrand,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBCollapse
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [showNav, setShowNav] = useState(false);

              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                    <MDBNavbarToggler
                      type='button'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                      onClick={() => setShowNav(!showNav)}
                    >
                      <MDBIcon icon='bars' fas />
                    </MDBNavbarToggler>
                    <MDBCollapse navbar show={showNav}>
                      <MDBNavbarNav>
                        <MDBNavbarItem>
                          <MDBNavbarLink active aria-current='page' href='#'>
                            Home
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink href='#'>Features</MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                            Disabled
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

And because we use classes for our navs, you can avoid the list-based approach entirely if you like. 

        
            
            import React, { useState } from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBNavbarBrand,
              MDBNavbarToggler,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBIcon,
              MDBCollapse
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [showNavSecond, setShowNavSecond] = useState(false);

              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                    <MDBNavbarToggler
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                      onClick={() => setShowNavSecond(!showNavSecond)}
                    >
                      <MDBIcon icon='bars' fas />
                    </MDBNavbarToggler>
                    <MDBCollapse navbar show={showNavSecond}>
                      <MDBNavbarNav>
                        <MDBNavbarLink active aria-current='page' href='#'>
                          Home
                        </MDBNavbarLink>
                        <MDBNavbarLink href='#'>Features</MDBNavbarLink>
                        <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
                        <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                          Disabled
                        </MDBNavbarLink>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Forms

Place various form controls and components within a navbar:

        
            
            import React from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBBtn
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar light bgColor='light'>
                  <MDBContainer fluid>
                    <form className='d-flex input-group w-auto'>
                      <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                      <MDBBtn color='primary'>Search</MDBBtn>
                    </form>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Immediate children elements in .navbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior. 

        
            
            import React from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBBtn
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar light bgColor='light'>
                  <MDBContainer fluid>
                    <a className='navbar-brand'>Navbar</a>
                    <form className='d-flex input-group w-auto'>
                      <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                      <MDBBtn color='primary'>Search</MDBBtn>
                    </form>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

White form for dark theme.

        
            
            import React from 'react';
            import { 
              MDBContainer,
              MDBNavbar, 
              MDBBtn
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar dark bgColor='dark'>
                  <MDBContainer fluid>
                    <form className='d-flex input-group w-auto'>
                      <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                      <button className='btn btn-outline-white' type='button'>
                        Search
                      </button>
                    </form>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Buttons

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements. 

        
            
            import React from 'react';
            import { 
              MDBNavbar, 
              MDBBtn
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar light bgColor='light'>
                  <form className='container-fluid justify-content-start'>
                    <MDBBtn outline color="success" className='me-2' type='button'>
                      Main button
                    </MDBBtn>
                    <MDBBtn outline color="secondary" size="sm" type='button'>
                      Smaller button
                    </MDBBtn>
                  </form>
                </MDBNavbar>
              );
            }

Text

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text. 

        
            
            import React from 'react';
            import { 
              MDBNavbar, 
              MDBContainer
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar light bgColor='light'>
                  <MDBContainer fluid>
                    <span className='navbar-text'> Navbar text with an inline element </span>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Mix and match with other components and utilities as needed.

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBNavbarBrand,
              MDBIcon,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBNavbarToggler,
              MDBCollapse
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [showNavText, setShowNavText] = useState(false);

              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarBrand href='#'>Navbar w/ text</MDBNavbarBrand>
                    <MDBNavbarToggler
                      type='button'
                      data-target='#navbarText'
                      aria-controls='navbarText'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                      onClick={() => setShowNavText(!showNavText)}
                    >
                      <MDBIcon icon='bars' fas />
                    </MDBNavbarToggler>
                    <MDBCollapse navbar show={showNavText}>
                      <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
                        <MDBNavbarItem>
                          <MDBNavbarLink active aria-current='page' href='#'>
                            Home
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink href='#'>Features</MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
                        </MDBNavbarItem>
                      </MDBNavbarNav>
                      <span className='navbar-text'> Navbar text with an inline element </span>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Breadcrumb

Very common use case - breadcrumb in the navbar.

        
            
            import React from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBBreadcrumb,
              MDBBreadcrumbItem
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <nav aria-label='breadcrumb'>
                      <MDBBreadcrumb>
                        <MDBBreadcrumbItem>
                          <a href='#'>Home</a>
                        </MDBBreadcrumbItem>
                        <MDBBreadcrumbItem>
                          <a href='#'>Library</a>
                        </MDBBreadcrumbItem>
                        <MDBBreadcrumbItem active aria-current='page'>
                          <a href='#'>Data</a>
                        </MDBBreadcrumbItem>
                      </MDBBreadcrumb>
                    </nav>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Icons

Choose from hundreds of our icons and simply add them to the navbar.

Note: We add .d-flex .flex-row classes to keep the icons inline when the navbar is collapsed. Without this, they will stack one under another. 

        
            
            import React from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBIcon,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarNav className='d-flex flex-row'>
                      <MDBNavbarItem className='me-3 me-lg-0'>
                        <MDBNavbarLink href='#'>
                          <MDBIcon fas icon='shopping-cart' />
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem className='me-3 me-lg-0'>
                        <MDBNavbarLink href='#'>
                          <MDBIcon fab icon='twitter' />
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                    </MDBNavbarNav>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Badges

Badges can be very useful for presenting counters, for example in the shopping cart. 

        
            
            import React from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBIcon,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBBadge
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarNav>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>
                          <MDBBadge pill color='danger'>!</MDBBadge>
                          <span>
                            <MDBIcon fas icon='shopping-cart'></MDBIcon>
                          </span>
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                    </MDBNavbarNav>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Content alignment

To align navbar content to the right or left use me-auto or ms-auto classes. For content centering use flexbox utilities.

Left aligned

Add .me-auto class next to the .navbar-nav to align the content to the left. 

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBIcon,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBNavbarToggler,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownMenu,
              MDBDropdownToggle,
              MDBDropdownItem,
              MDBDropdownLink
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [showNavLeft, setShowNavLeft] = useState(false);

              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarToggler
                      type='button'
                      data-target='#navbarLeftAlignExample'
                      aria-controls='navbarLeftAlignExample'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                      onClick={() => setShowNavLeft(!showNavLeft)}
                    >
                      <MDBIcon icon='bars' fas />
                    </MDBNavbarToggler>
  
                    <MDBCollapse navbar show={showNavLeft}>
                      <MDBNavbarNav className='me-auto mb-2 mb-lg-0'>
                        <MDBNavbarItem>
                          <MDBNavbarLink active aria-current='page' href='#'>
                            Home
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink href='#'>Link</MDBNavbarLink>
                        </MDBNavbarItem>
  
                        <MDBNavbarItem>
                          <MDBDropdown>
                            <MDBDropdownToggle tag='a' className='nav-link'>
                              Dropdown
                            </MDBDropdownToggle>
                            <MDBDropdownMenu>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Action</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Another action</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Something else here</MDBDropdownLink>
                              </MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                            Disabled
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Right aligned

Add .ms-auto class next to the .navbar-nav to align the content to the right. 

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBIcon,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBNavbarToggler,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownMenu,
              MDBDropdownToggle,
              MDBDropdownItem,
              MDBDropdownLink
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [showNavRight, setShowNavRight] = useState(false);

              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarToggler
                      type='button'
                      data-target='#navbarRightAlignExample'
                      aria-controls='navbarRightAlignExample'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                      onClick={() => setShowNavRight(!showNavRight)}
                    >
                      <MDBIcon icon='bars' fas />
                    </MDBNavbarToggler>

                    <MDBCollapse navbar show={showNavRight}>
                      <MDBNavbarNav right fullWidth={false} className='mb-2 mb-lg-0'>
                        <MDBNavbarItem>
                          <MDBNavbarLink active aria-current='page' href='#'>
                            Home
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink href='#'>Link</MDBNavbarLink>
                        </MDBNavbarItem>

                        <MDBNavbarItem>
                          <MDBDropdown>
                            <MDBDropdownToggle tag='a' className='nav-link'>
                              Dropdown
                            </MDBDropdownToggle>
                            <MDBDropdownMenu>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Action</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Another action</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Something else here</MDBDropdownLink>
                              </MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                            Disabled
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Centered

Remove .ms-auto or .me-auto class and add .justify-content-center next to the .navbar-collapse to center the content. 

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBIcon,
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBNavbarToggler,
              MDBCollapse,
              MDBDropdown,
              MDBDropdownMenu,
              MDBDropdownToggle,
              MDBDropdownItem,
              MDBDropdownLink
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [showNavCentred, setShowNavCentred] = useState(false);

              return (
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarToggler
                      type='button'
                      data-target='#navbarCenteredExample'
                      aria-controls='navbarCenteredExample'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                      onClick={() => setShowNavCentred(!showNavCentred)}
                    >
                      <MDBIcon icon='bars' fas />
                    </MDBNavbarToggler>
  
                    <MDBCollapse navbar show={showNavCentred} center id='navbarCenteredExample'>
                      <MDBNavbarNav fullWidth={false} className='mb-2 mb-lg-0'>
                        <MDBNavbarItem>
                          <MDBNavbarLink active aria-current='page' href='#'>
                            Home
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink href='#'>Link</MDBNavbarLink>
                        </MDBNavbarItem>
  
                        <MDBNavbarItem>
                          <MDBDropdown>
                            <MDBDropdownToggle tag='a' className='nav-link'>
                              Dropdown
                            </MDBDropdownToggle>
                            <MDBDropdownMenu>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Action</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Another action</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink>Something else here</MDBDropdownLink>
                              </MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavbarItem>
                        <MDBNavbarItem>
                          <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                            Disabled
                          </MDBNavbarLink>
                        </MDBNavbarItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              );
            }

Colors

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

See also our color docs to learn more about colors. 



        
            
          import React, { useState } from 'react';
          import { 
            MDBNavbar, 
            MDBContainer,
            MDBIcon,
            MDBNavbarNav,
            MDBNavbarItem,
            MDBNavbarLink,
            MDBNavbarToggler,
            MDBNavbarBrand,
            MDBCollapse
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [showNavColor, setShowNavColor] = useState(false);
            const [showNavColorSecond, setShowNavColorSecond] = useState(false);
            const [showNavColorThird, setShowNavColorThird] = useState(false);

            return (
              <>
              <MDBNavbar expand='lg' dark bgColor='primary'>
                <MDBContainer fluid>
                  <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                  <MDBNavbarToggler
                    type='button'
                    data-target='#navbarColor02'
                    aria-controls='navbarColor02'
                    aria-expanded='false'
                    aria-label='Toggle navigation'
                    onClick={() => setShowNavColor(!showNavColor)}
                  >
                    <MDBIcon icon='bars' fas />
                  </MDBNavbarToggler>
                  <MDBCollapse show={showNavColor} navbar>
                    <MDBNavbarNav className='me-auto mb-2 mb-lg-0'>
                      <MDBNavbarItem className='active'>
                        <MDBNavbarLink aria-current='page' href='#'>
                          Home
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>Features</MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>About</MDBNavbarLink>
                      </MDBNavbarItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>

              <br />

              <MDBNavbar expand='lg' dark bgColor='dark'>
                <MDBContainer fluid>
                  <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                  <MDBNavbarToggler
                    type='button'
                    data-target='#navbarColor02'
                    aria-controls='navbarColor02'
                    aria-expanded='false'
                    aria-label='Toggle navigation'
                    onClick={() => setShowNavColorSecond(!showNavColorSecond)}
                  >
                    <MDBIcon icon='bars' fas />
                  </MDBNavbarToggler>
                  <MDBCollapse show={showNavColorSecond} navbar id='navbarColor02'>
                    <MDBNavbarNav className='me-auto mb-2 mb-lg-0'>
                      <MDBNavbarItem className='active'>
                        <MDBNavbarLink aria-current='page' href='#'>
                          Home
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>Features</MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>About</MDBNavbarLink>
                      </MDBNavbarItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>

              <br />

              <MDBNavbar expand='lg' light style={{ backgroundColor: '#e3f2fd' }}>
                <MDBContainer fluid>
                  <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                  <MDBNavbarToggler
                    type='button'
                    data-target='#navbarColor02'
                    aria-controls='navbarColor02'
                    aria-expanded='false'
                    aria-label='Toggle navigation'
                    onClick={() => setShowNavColorThird(!showNavColorThird)}
                  >
                    <MDBIcon icon='bars' fas />
                  </MDBNavbarToggler>
                  <MDBCollapse show={showNavColorThird} navbar>
                    <MDBNavbarNav className='me-auto mb-2 mb-lg-0'>
                      <MDBNavbarItem className='active'>
                        <MDBNavbarLink aria-current='page' href='#'>
                          Home
                        </MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>Features</MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
                      </MDBNavbarItem>
                      <MDBNavbarItem>
                        <MDBNavbarLink href='#'>About</MDBNavbarLink>
                      </MDBNavbarItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>
              </>
            );
          }

Containers

Although it’s not required, you can wrap a navbar in a MDBContainer to center it on a page or add one within to only center the contents of a fixed or static top navbar. Note that an inner container is still required. 

        
            
          import React from 'react';
          import { 
            MDBNavbar, 
            MDBContainer,
            MDBNavbarBrand,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBContainer>
                  <MDBNavbar expand='lg' light bgColor='light'>
                    <MDBContainer fluid>
                      <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                    </MDBContainer>
                  </MDBNavbar>
                </MDBContainer>
              </>
            );
          }

Use any of the responsive containers to change how wide the content in your navbar.

        
            
          import React from 'react';
          import { 
            MDBNavbar, 
            MDBContainer,
            MDBNavbarBrand,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBNavbar expand='lg' light bgColor='light'>
                  <MDBContainer size="md">
                    <MDBNavbarBrand href="#">Navbar</MDBNavbarBrand>
                  </MDBContainer>
                </MDBNavbar>
              </>
            );
          }

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser. 

        
            
          import React from 'react';
          import { 
            MDBNavbar, 
            MDBContainer,
            MDBNavbarBrand,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBNavbar light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarBrand href='#'>Default</MDBNavbarBrand>
                  </MDBContainer>
                </MDBNavbar>
              </>
            );
          }
          
        
    
        
            
          import React from 'react';
          import { 
            MDBNavbar, 
            MDBContainer,
            MDBNavbarBrand,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBNavbar fixed='top' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarBrand href='#'>Fixed top</MDBNavbarBrand>
                  </MDBContainer>
                </MDBNavbar>
              </>
            );
          }
          
        
    
        
            
          import React from 'react';
          import { 
            MDBNavbar, 
            MDBContainer,
            MDBNavbarBrand,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBNavbar fixed='bottom' light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarBrand href='#'>Fixed bottom</MDBNavbarBrand>
                  </MDBContainer>
                </MDBNavbar>
              </>
            );
          }
          
        
    
        
            
          import React from 'react';
          import { 
            MDBNavbar, 
            MDBContainer,
            MDBNavbarBrand,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBNavbar sticky light bgColor='light'>
                  <MDBContainer fluid>
                    <MDBNavbarBrand href='#'>Sticky top</MDBNavbarBrand>
                  </MDBContainer>
                </MDBNavbar>
              </>
            );
          }

Responsive behaviors

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

With no .navbar-brand shown in lowest breakpoint:

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBNavbarBrand,
              MDBNavbarToggler,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBCollapse,
              MDBBtn,
              MDBIcon,
              MDBNavbarNav,
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              const [showNavNoToggler, setShowNavNoToggler] = useState(false);

              return (
                <>
                  <MDBNavbar expand='lg' light bgColor='light'>
                    <MDBContainer fluid>
                      <MDBNavbarToggler
                        type='button'
                        data-target='#navbarTogglerDemo01'
                        aria-controls='navbarTogglerDemo01'
                        aria-expanded='false'
                        aria-label='Toggle navigation'
                        onClick={() => setShowNavNoToggler(!showNavNoToggler)}
                      >
                        <MDBIcon icon='bars' fas />
                      </MDBNavbarToggler>
                      <MDBCollapse navbar show={showNavNoToggler}>
                        <MDBNavbarBrand href='#'>Hidden brand</MDBNavbarBrand>
                        <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
                          <MDBNavbarItem>
                            <MDBNavbarLink active aria-current='page' href='#'>
                              Home
                            </MDBNavbarLink>
                          </MDBNavbarItem>
                          <MDBNavbarItem>
                            <MDBNavbarLink href='#'>Link</MDBNavbarLink>
                          </MDBNavbarItem>
                          <MDBNavbarItem>
                            <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                              Disabled
                            </MDBNavbarLink>
                          </MDBNavbarItem>
                        </MDBNavbarNav>
                        <form className='d-flex input-group w-auto'>
                          <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                          <MDBBtn color='primary'>Search</MDBBtn>
                        </form>
                      </MDBCollapse>
                    </MDBContainer>
                  </MDBNavbar>
                </>
              );
            }

With a brand name shown on the left and toggler on the right:

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBNavbarBrand,
              MDBNavbarToggler,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBCollapse,
              MDBBtn,
              MDBIcon,
              MDBNavbarNav,
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              const [showNavNoTogglerSecond, setShowNavNoTogglerSecond] = useState(false);

              return (
                <>
                  <MDBNavbar expand='lg' light bgColor='light'>
                    <MDBContainer fluid>
                      <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                      <MDBNavbarToggler
                        type='button'
                        data-target='#navbarTogglerDemo02'
                        aria-controls='navbarTogglerDemo02'
                        aria-expanded='false'
                        aria-label='Toggle navigation'
                        onClick={() => setShowNavNoTogglerSecond(!showNavNoTogglerSecond)}
                      >
                        <MDBIcon icon='bars' fas />
                      </MDBNavbarToggler>
                      <MDBCollapse navbar show={showNavNoTogglerSecond}>
                        <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
                          <MDBNavbarItem>
                            <MDBNavbarLink active aria-current='page' href='#'>
                              Home
                            </MDBNavbarLink>
                          </MDBNavbarItem>
                          <MDBNavbarItem>
                            <MDBNavbarLink href='#'>Link</MDBNavbarLink>
                          </MDBNavbarItem>
                          <MDBNavbarItem>
                            <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                              Disabled
                            </MDBNavbarLink>
                          </MDBNavbarItem>
                        </MDBNavbarNav>
                        <form className='d-flex input-group w-auto'>
                          <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                          <MDBBtn color='primary'>Search</MDBBtn>
                        </form>
                      </MDBCollapse>
                    </MDBContainer>
                  </MDBNavbar>
                </>
              );
            }

With a toggler on the left and brand name on the right:

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBNavbarBrand,
              MDBNavbarToggler,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBCollapse,
              MDBBtn,
              MDBNavbarNav,
              MDBIcon,
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              const [showNavNoTogglerThird, setShowNavNoTogglerThird] = useState(false);

              return (
                <>
                  <MDBNavbar expand='lg' light bgColor='light'>
                    <MDBContainer fluid>
                      <MDBNavbarToggler
                        type='button'
                        data-target='#navbarTogglerDemo03'
                        aria-controls='navbarTogglerDemo03'
                        aria-expanded='false'
                        aria-label='Toggle navigation'
                        onClick={() => setShowNavNoTogglerThird(!showNavNoTogglerThird)}
                      >
                        <MDBIcon icon='bars' fas />
                      </MDBNavbarToggler>
                      <MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
                      <MDBCollapse navbar show={showNavNoTogglerThird}>
                        <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
                          <MDBNavbarItem>
                            <MDBNavbarLink active aria-current='page' href='#'>
                              Home
                            </MDBNavbarLink>
                          </MDBNavbarItem>
                          <MDBNavbarItem>
                            <MDBNavbarLink href='#'>Link</MDBNavbarLink>
                          </MDBNavbarItem>
                          <MDBNavbarItem>
                            <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                              Disabled
                            </MDBNavbarLink>
                          </MDBNavbarItem>
                        </MDBNavbarNav>
                        <form className='d-flex input-group w-auto'>
                          <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                          <MDBBtn color='primary'>Search</MDBBtn>
                        </form>
                      </MDBCollapse>
                    </MDBContainer>
                  </MDBNavbar>
                </>
              );
            }

External content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-mdb-target matching, that’s easily done! 

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBContainer,
              MDBNavbarBrand,
              MDBNavbarToggler,
              MDBNavbarItem,
              MDBNavbarLink,
              MDBIcon,
              MDBCollapse
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              const [showNavExternal, setShowNavExternal] = useState(false);

              return (
                <>
                  <MDBCollapse show={showNavExternal}>
                    <div className='bg-dark p-4'>
                      <h5 className='text-white h4'>Collapsed content</h5>
                      <span className='text-muted'>Toggleable via the navbar brand.</span>
                    </div>
                  </MDBCollapse>
                  <MDBNavbar dark bgColor='dark'>
                    <MDBContainer fluid>
                      <MDBNavbarToggler
                        type='button'
                        data-target='#navbarToggleExternalContent'
                        aria-controls='navbarToggleExternalContent'
                        aria-expanded='false'
                        aria-label='Toggle navigation'
                        onClick={() => setShowNavExternal(!showNavExternal)}
                      >
                        <MDBIcon icon='bars' fas />
                      </MDBNavbarToggler>
                    </MDBContainer>
                  </MDBNavbar>
                </>
              );
            }

Navbar - API

Import

        
            
          import { 
            MDBNavbar, 
            MDBNavbarBrand, 
            MDBNavbarBrand, 
            MDBNavbarLink, 
            MDBNavbarNav, 
            MDBNavbarToggler 
          } from 'mdb-react-ui-kit';

Properties

MDBNavbar

Name Type Default Description Example
tag React.ComponentProps<any> 'nav' Defines tag of the MDBNavbar element <MDBNavbar tag="section" />
className string '' Add custom class to MDBNavbar <MDBNavbar className="class" />
color string '' Add text color to all elements. <MDBNavbar color="white" />
expand string | boolean '' Set type of navbar expand to element. <MDBNavbar expand="lg" />
bgColor "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" '' Set color of background to navbar. <MDBNavbar bgColor="dark" />
light boolean '' Set light color of background to navbar. <MDBNavbar light />
dark boolean '' Set dark color of background to navbar. <MDBNavbar dark />
color "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "body" | "muted" | "white" | "black-50" | "white-50" '' Changes a color of the text in the navbar. <MDBNavbar color='danger' />
fixed boolean false Enables fixed navbar. <MDBNavbar fixed />
sticky boolean false Sticks navbar to the top of the page. <MDBNavbar sticky />
transparent boolean false Creates a transparent navbar. <MDBNavbar transparent />
scrolling boolean false Creates a scrolling navbar. <MDBNavbar scrolling />
scrollingNavbarOffset number 0 An additional offset to the scrolling navbar. <MDBNavbar scrolling scrollingNavbarOffset={100}/>
ref React.Ref<any> A reference to the MDBNavbar component. <MDBNavbar ref={someRef} />

MDBNavbarBrand

Name Type Default Description Example
tag React.ComponentProps<any> 'a' Defines tag of the MDBNavbarBrand element <MDBNavbarBrand tag="section" />
className string '' Add custom class to MDBNavbarBrand <MDBNavbarBrand className="class" />
ref React.Ref<any> A reference to the MDBNavbarBrand component. <MDBNavbarBrand ref={someRef} />

MDBNavbarItem

Name Type Default Description Example
tag React.ComponentProps<any> 'li' Defines tag of the MDBNavbarItem element <MDBNavbarItem tag="section" />
className string '' Add custom class to MDBNavbarItem <MDBNavbarItem className="class" />
active boolean false Adds an active class to MDBNavbarItem <MDBNavbarItem active />
text boolean false Adds a navbar-text class to MDBNavbarItem <MDBNavbarItem text />
ref React.Ref<any> A reference to the MDBNavbarItem component. <MDBNavbarItem ref={someRef} />

MDBNavbarNav

Name Type Default Description Example
tag Rect.ComponentProps<any> 'ul' Defines tag of the MDBNavbarNav element <MDBNavbarNav tag="section" />
className string '' Add custom class to MDBNavbarNav <MDBNavbarNav className="class" />
right boolean false Add a me-auto class to MDBNavbarNav <MDBNavbarNav right />
left boolean false Add ms-auto class to MDBNavbarNav <MDBNavbarNav left />
ref React.Ref<any> A reference to the MDBNavbarNav component. <MDBNavbarNav ref={someRef} />

MDBNavbarToggler

Name Type Default Description Example
tag React.ComponentProps<any> 'button' Defines tag of the MDBNavbarToggler element <MDBNavbarToggler tag="section" />
className string '' Add custom class to MDBNavbarToggler <MDBNavbarToggler className="class" />
ref React.Ref<any> Add reference to the MDBNavbarToggler component. <MDBNavbarToggler ref={someRef} />