Headers

React Bootstrap 5 Headers component

Headers are compositions that extend standard navbar functionalities. They contain additional components like a jumbotron, sub-navbar, or image covers which serve as a containers for extra navigation elements - usually links, forms, or call-to-action buttons.


Jumbotron

A jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

        
            
          import React, { useState } from 'react';
          import { 
            MDBNavbar, 
            MDBNavbarNav,
            MDBNavbarItem,
            MDBNavbarLink,
            MDBNavbarToggler, 
            MDBContainer, 
            MDBIcon,
            MDBCollapse
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [showBasic, setShowBasic] = useState(false);
            return (
              <header>
                <MDBNavbar expand='lg' light bgColor='white'>
                  <MDBContainer fluid>
                    <MDBNavbarToggler
                      onClick={() => setShowBasic(!showBasic)}
                      aria-controls='navbarExample01'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                    >
                      <MDBIcon fas icon='bars' />
                    </MDBNavbarToggler>
                    <MDBCollapse show={showBasic}>
                      <MDBNavbarNav right className='mb-2 mb-lg-0'>
                        <MDBNavbarItem 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>

                <div className='p-5 text-center bg-light'>
                  <h1 className='mb-3'>Heading</h1>
                  <h4 className='mb-3'>Subheading</h4>
                  <a className='btn btn-primary' href='' role='button'>
                    Call to action
                  </a>
                </div>
              </header>
            );
          }
          
        
    

Background image

Header with background image might help to outstand your call to action elements by catching the eyes to some beautiful image in the background.

To provide a proper contrast it's highly recommended to use a mask. You can change the color and the opacity of the mask by manipulating RGBA code.

You also must set the height of the background image, otherwise, the component will collapse. In the example below, we set the height to 400px.

We use flexbox utilities to center the content vertically and horizontally.

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

            return (
              <header>
                <MDBNavbar expand='lg' light bgColor='white'>
                  <MDBContainer fluid>
                    <MDBNavbarToggler
                      onClick={() => setShowBasic(!showBasic)}
                      aria-controls='navbarExample01'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                    >
                      <MDBIcon fas icon='bars' />
                    </MDBNavbarToggler>
                    <MDBCollapse navbar show={showBasic}>
                      <MDBNavbarNav right className='mb-2 mb-lg-0'>
                        <MDBNavbarItem 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>

                <div
                  className='p-5 text-center bg-image'
                  style={{ backgroundImage: "url('https://mdbootstrap.com/img/new/slides/041.webp')", height: '400px' }}
                >
                  <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
                    <div className='d-flex justify-content-center align-items-center h-100'>
                      <div className='text-white'>
                        <h1 className='mb-3'>Heading</h1>
                        <h4 className='mb-3'>Subheading</h4>
                        <MDBBtn tag="a" outline size="lg">
                          Call to action
                        </MDBBtn>
                      </div>
                    </div>
                  </div>
                </div>
              </header>
            );
          }
          
        
    

If you need to set a different height of the background image for large and small devices it's better to set it via regular CSS instead of inline CSS.

In the example below, we give it an id="intro-example" and set a height of 400px for small devices and 600px for larger.

Learn Bootstrap 5 with MDB

Best & free guide of responsive web design
Start tutorial Download MDB UI KIT
        
            
              import React, { useState } from 'react';
              import { 
                MDBNavbar, 
                MDBNavbarNav,
                MDBNavbarItem,
                MDBNavbarToggler, 
                MDBNavbarLink, 
                MDBContainer, 
                MDBIcon,
                MDBCollapse,
                MDBBtn
              } from 'mdb-react-ui-kit';
  
              export default function App() {
                const [showBasic, setShowBasic] = useState(false);

                return (
                  <header>
                    <MDBNavbar expand='lg' light bgColor='white'>
                      <MDBContainer fluid>
                        <MDBNavbarToggler
                          aria-controls='navbarExample01'
                          aria-expanded='false'
                          aria-label='Toggle navigation'
                        >
                          <MDBIcon fas icon='bars' />
                        </MDBNavbarToggler>
                        <MDBCollapse show={showBasic}>
                          <MDBNavbarNav right className='mb-2 mb-lg-0'>
                            <MDBNavbarItem 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>
    
                    <div
                      id='intro-example'
                      className='p-5 text-center bg-image'
                      style={{ backgroundImage: "url('https://mdbootstrap.com/img/new/slides/041.webp')" }}
                    >
                      <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}>
                        <div className='d-flex justify-content-center align-items-center h-100'>
                          <div className='text-white'>
                            <h1 className='mb-3'>Learn Bootstrap 5 with MDB</h1>
                            <h5 className='mb-4'>Best &amp; free guide of responsive web design</h5>
                            <MDBBtn
                              className="m-2"
                              tag="a"
                              outline
                              size="lg"
                              rel="nofollow"
                              target="_blank"
                              href='https://www.youtube.com/watch?v=c9B4TPnak1A'
                            >
                              Start tutorial
                            </MDBBtn>
                            <MDBBtn
                              className="m-2"
                              tag="a"
                              outline
                              size="lg"
                              target="_blank"
                              href='https://mdbootstrap.com/docs/standard/'
                            >
                              Download MDB UI KIT
                            </MDBBtn>
                          </div>
                        </div>
                      </div>
                    </div>
                  </header>
                );
              }
              
        
    
        
            
                /* Default height for small devices */
                #intro-example {
                  height: 400px;
                }
    
                /* Height for devices larger than 992px */
                @media (min-width: 992px) {
                  #intro-example {
                    height: 600px;
                  }
                }
              
        
    

Fixed navbar

You can stick the navbar to the top of the window by using .fixed-top class. Thanks to this whenever you scroll the page the navbar will be always visible.

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. In the examples below, we add margin-top: 58px; (height of the navbar) to the jumbotron and background image for this purpose.

Heading

Subheading

Call to action

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

        
            
            import React, { useState } from 'react';
            import { 
              MDBNavbar, 
              MDBNavbarNav,
              MDBNavbarItem,
              MDBNavbarLink, 
              MDBNavbarToggler, 
              MDBContainer, 
              MDBIcon,
              MDBBtn,
              MDBCollapse
            } from 'mdb-react-ui-kit';

            export default function App() {
              const [showBasic, setShowBasic] = useState(false);

              return (
                <header>
                  <MDBNavbar expand='lg' light bgColor='white' fixed>
                    <MDBContainer fluid>
                      <MDBNavbarToggler
                        aria-controls='navbarExample01'
                        aria-expanded='false'
                        aria-label='Toggle navigation'
                      >
                        <MDBIcon fas icon='bars' />
                      </MDBNavbarToggler>
                      <MDBCollapse show={showBasic}>
                        <MDBNavbarNav right className='mb-2 mb-lg-0'>
                          <MDBNavbarItem 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>

                  <div className='p-5 text-center bg-light'>
                    <h1 className='mb-3'>Heading</h1>
                    <h4 className='mb-3'>Subheading</h4>
                    <MDBBtn tag="a" outline size="lg">
                      Call to action
                    </MDBBtn>
                  </div>

                  <p className='mt-4'>Scroll down</p>
                  <p>Scroll down</p>
                  <p>Scroll down</p>
                  <p>Scroll down</p>
                  <p>Scroll down</p>
                  <p>Scroll down</p>
                  <p>Scroll down</p>
                  <p>Scroll down</p>
                </header>
              );
            }
          
        
    

Heading

Subheading

Call to action

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

        
            
          import React from 'react';
          import { 
            MDBNavbar, 
            MDBNavbarNav,
            MDBNavbarItem,
            MDBNavbarLink, 
            MDBNavbarToggler, 
            MDBContainer, 
            MDBIcon,
            MDBCollapse
          } from 'mdb-react-ui-kit';

          export default function App() {
            return (
              <header>
                <MDBNavbar expand='lg' light bgColor='white' sticky>
                  <MDBContainer fluid>
                    <MDBNavbarToggler
                      aria-controls='navbarExample01'
                      aria-expanded='false'
                      aria-label='Toggle navigation'
                      onClick={() => setShowBasic(!showBasic)}
                    >
                      <MDBIcon fas icon='bars' />
                    </MDBNavbarToggler>
                    <MDBCollapse show={showBasic}
                      <MDBNavbarNav right className='mb-2 mb-lg-0'>
                        <MDBNavbarItem 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>

                <div
                  className='p-5 text-center bg-image'
                  style={{ backgroundImage: "url('https://mdbootstrap.com/img/new/slides/041.webp')", height: 400 }}
                >
                  <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
                    <div className='d-flex justify-content-center align-items-center h-100'>
                      <div className='text-white'>
                        <h1 className='mb-3'>Heading</h1>
                        <h4 className='mb-3'>Subheading</h4>
                        <a className='btn btn-outline-light btn-lg' href='#!' role='button'>
                          Call to action
                        </a>
                      </div>
                    </div>
                  </div>
                </div>

                <p className='mt-4'>Scroll down</p>
                <p>Scroll down</p>
                <p>Scroll down</p>
                <p>Scroll down</p>
                <p>Scroll down</p>
                <p>Scroll down</p>
                <p>Scroll down</p>
                <p>Scroll down</p>
              </header>
            );
          }
          
        
    

Animated navbar

You can achieve a very impressive effect by using our animated navbar, which is transparent on start, and change the color after the scroll.

Click the button below to see the full-screen demo.

        
            
              import React, { useState } from "react";
              import {
                MDBAnimatedNavbar,
                MDBContainer,
                MDBNavbarToggler,
                MDBIcon,
                MDBNavbarNav,
                MDBNavbarLink,
                MDBNavbarItem,
                MDBCollapse,
              } from "mdb-react-ui-kit";
              
              export default function App() {
                const [showBasic, setShowBasic] = useState(true);
              
                return (
                  <>
                    <header>
                      <MDBAnimatedNavbar expand="lg" fixed="top">
                        <MDBContainer fluid>
                          <MDBNavbarToggler
                            onClick={() => setShowBasic(!showBasic)}
                            aria-controls="navbarExample01"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                          >
                            <MDBIcon fas icon="bars" />
                          </MDBNavbarToggler>
                          <MDBCollapse navbar show={showBasic}>
                            <MDBNavbarNav fullWidth={false} className="me-auto mb-2 mb-lg-0">
                              <MDBNavbarItem active>
                                <MDBNavbarLink href="#">Home</MDBNavbarLink>
                              </MDBNavbarItem>
                              <MDBNavbarItem>
                                <MDBNavbarLink
                                  href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                                  rel="nofollow"
                                  target="_blank"
                                >
                                  Learn Bootstrap 5
                                </MDBNavbarLink>
                              </MDBNavbarItem>
                              <MDBNavbarItem>
                                <MDBNavbarLink
                                  href="https://mdbootstrap.com/docs/standard/"
                                  target="_blank"
                                >
                                  Download MDB UI KIT
                                </MDBNavbarLink>
                              </MDBNavbarItem>
                            </MDBNavbarNav>
              
                            <MDBNavbarNav fullWidth={false} className="flex-row">
                              <MDBNavbarItem>
                                <MDBNavbarLink
                                  className="pe-2"
                                  href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                                  rel="nofollow"
                                  target="_blank"
                                >
                                  <MDBIcon fab icon="youtube" />
                                </MDBNavbarLink>
                              </MDBNavbarItem>
                              <MDBNavbarItem>
                                <MDBNavbarLink
                                  className="px-2"
                                  href="https://www.facebook.com/mdbootstrap"
                                  rel="nofollow"
                                  target="_blank"
                                >
                                  <MDBIcon fab icon="facebook-f" />
                                </MDBNavbarLink>
                              </MDBNavbarItem>
                              <MDBNavbarItem>
                                <MDBNavbarLink
                                  className="px-2"
                                  href="https://twitter.com/MDBootstrap"
                                  rel="nofollow"
                                  target="_blank"
                                >
                                  <MDBIcon fab icon="twitter" />
                                </MDBNavbarLink>
                              </MDBNavbarItem>
                              <MDBNavbarItem>
                                <MDBNavbarLink
                                  className="ps-2"
                                  href="https://github.com/mdbootstrap/mdb-ui-kit"
                                  rel="nofollow"
                                  target="_blank"
                                >
                                  <MDBIcon fab icon="github" />
                                </MDBNavbarLink>
                              </MDBNavbarItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBAnimatedNavbar>
              
                      <div
                        id="intro"
                        className="bg-image"
                        style={{
                          backgroundImage:
                            "url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp)",
                          height: "100vh",
                        }}
                      >
                        <div
                          className="mask text-white"
                          style={{ backgroundColor: "rgba(0, 0, 0, 0.8)" }}
                        >
                          <MDBContainer className="d-flex align-items-center text-center h-100">
                            <div>
                              <h1 className="mb-5">This is title</h1>
                              <p>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                Officiis molestiae laboriosam numquam expedita ullam saepe
                                ipsam, deserunt provident corporis, sit non accusamus maxime,
                                magni nulla quasi iste ipsa architecto? Autem!
                              </p>
                            </div>
                          </MDBContainer>
                        </div>
                      </div>
                    </header>
              
                    <MDBContainer className="my-5">
                      <p>
                        {" "}
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam
                        minima perspiciatis eos tenetur. Praesentium dolores at quos aperiam
                        sed, sint provident consectetur incidunt, nostrum porro earum commodi,
                        ex architecto.
                      </p>
                    </MDBContainer>
                  </>
                );
              }      
            
        
    

If you want to customize the colors in the animated navbar you need to overwrite the following styles.

Note: These are the default settings. If you don't want to change anything then you don't need to add or modify the following code.

        
            
            /* Color of the links BEFORE scroll */
            .navbar-scroll .nav-link,
            .navbar-scroll .navbar-toggler-icon {
              color: #fff;
            }

            /* Color of the links AFTER scroll */
            .navbar-scrolled .nav-link,
            .navbar-scrolled .navbar-toggler-icon {
              color: #4f4f4f;
            }

            /* Color of the navbar AFTER scroll */
            .navbar-scrolled {
              background-color: #fff;
            }

            /* An optional height of the navbar AFTER scroll */
            .navbar.navbar-scroll.navbar-scrolled {
              padding-top: 5px;
              padding-bottom: 5px;
            }