Navbar with Footer

Bootstrap 5 Navbar with Footer component


Basic example

Example of simple usage of a Navbar combined with the Footer component.

Live demo
        
            
                  <!-- Navbar -->
                  <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <!-- Container wrapper -->
                    <div class="container-fluid">
                      <!-- Toggle button -->
                      <button class="navbar-toggler" type="button" data-mdb-collapse-init
                        data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-bars"></i>
                      </button>

                      <!-- Collapsible wrapper -->
                      <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <!-- Navbar brand -->
                        <a class="navbar-brand mt-2 mt-lg-0" href="#">
                          <img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="15"
                            alt="MDB Logo" loading="lazy" />
                        </a>
                        <!-- Left links -->
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                          <li class="nav-item">
                            <a class="nav-link" href="#">Dashboard</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Team</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Projects</a>
                          </li>
                        </ul>
                        <!-- Left links -->
                      </div>
                      <!-- Collapsible wrapper -->

                      <!-- Right elements -->
                      <div class="d-flex align-items-center">
                        <!-- Icon -->
                        <a class="text-reset me-3" href="#">
                          <i class="fas fa-shopping-cart"></i>
                        </a>

                        <!-- Notifications -->
                        <div class="dropdown">
                          <a data-mdb-dropdown-init class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
                            role="button" data-mdb-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-bell"></i>
                            <span class="badge rounded-pill badge-notification bg-danger">1</span>
                          </a>
                          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
                            <li>
                              <a class="dropdown-item" href="#">Some news</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Another news</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Something else here</a>
                            </li>
                          </ul>
                        </div>
                        <!-- Avatar -->
                        <div class="dropdown">
                          <a data-mdb-dropdown-init class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
                            id="navbarDropdownMenuAvatar" role="button" data-mdb-toggle="dropdown"
                            aria-expanded="false">
                            <img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded-circle"
                              height="25" alt="Black and White Portrait of a Man" loading="lazy" />
                          </a>
                          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
                            <li>
                              <a class="dropdown-item" href="#">My profile</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Settings</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Logout</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <!-- Right elements -->
                    </div>
                    <!-- Container wrapper -->
                  </nav>
                  <!-- Navbar -->

                  <div class="container" style="height: 50vh;">

                  </div>

                  <!-- Footer -->
                  <footer class="text-center text-lg-start bg-light text-muted">
                    <!-- Section: Social media -->
                    <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
                      <!-- Left -->
                      <div class="me-5 d-none d-lg-block">
                        <span>Get connected with us on social networks:</span>
                      </div>
                      <!-- Left -->

                      <!-- Right -->
                      <div>
                        <a href="" class="me-4 text-reset">
                          <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="" class="me-4 text-reset">
                          <i class="fab fa-twitter"></i>
                        </a>
                        <a href="" class="me-4 text-reset">
                          <i class="fab fa-google"></i>
                        </a>
                        <a href="" class="me-4 text-reset">
                          <i class="fab fa-instagram"></i>
                        </a>
                        <a href="" class="me-4 text-reset">
                          <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="" class="me-4 text-reset">
                          <i class="fab fa-github"></i>
                        </a>
                      </div>
                      <!-- Right -->
                    </section>
                    <!-- Section: Social media -->

                    <!-- Section: Links  -->
                    <section class="">
                      <div class="container text-center text-md-start mt-5">
                        <!-- Grid row -->
                        <div class="row mt-3">
                          <!-- Grid column -->
                          <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
                            <!-- Content -->
                            <h6 class="text-uppercase fw-bold mb-4">
                              <i class="fas fa-gem me-3"></i>Company name
                            </h6>
                            <p>
                              Here you can use rows and columns to organize your footer content. Lorem ipsum
                              dolor sit amet, consectetur adipisicing elit.
                            </p>
                          </div>
                          <!-- Grid column -->

                          <!-- Grid column -->
                          <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
                            <!-- Links -->
                            <h6 class="text-uppercase fw-bold mb-4">
                              Products
                            </h6>
                            <p>
                              <a href="#!" class="text-reset">Angular</a>
                            </p>
                            <p>
                              <a href="#!" class="text-reset">React</a>
                            </p>
                            <p>
                              <a href="#!" class="text-reset">Vue</a>
                            </p>
                            <p>
                              <a href="#!" class="text-reset">Laravel</a>
                            </p>
                          </div>
                          <!-- Grid column -->

                          <!-- Grid column -->
                          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
                            <!-- Links -->
                            <h6 class="text-uppercase fw-bold mb-4">
                              Useful links
                            </h6>
                            <p>
                              <a href="#!" class="text-reset">Pricing</a>
                            </p>
                            <p>
                              <a href="#!" class="text-reset">Settings</a>
                            </p>
                            <p>
                              <a href="#!" class="text-reset">Orders</a>
                            </p>
                            <p>
                              <a href="#!" class="text-reset">Help</a>
                            </p>
                          </div>
                          <!-- Grid column -->

                          <!-- Grid column -->
                          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
                            <!-- Links -->
                            <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
                            <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
                            <p>
                              <i class="fas fa-envelope me-3"></i>
                              info@example.com
                            </p>
                            <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
                            <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
                          </div>
                          <!-- Grid column -->
                        </div>
                        <!-- Grid row -->
                      </div>
                    </section>
                    <!-- Section: Links  -->

                    <!-- Copyright -->
                    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
                      © 2021 Copyright:
                      <a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
                    </div>
                    <!-- Copyright -->
                  </footer>
                  <!-- Footer -->
                  
        
    

Sidebar with Footer

By using sidebar component you can create fully functional page navigation with footer inluding extra info.

Live demo
        
            
                  <!--Main Navigation-->
                  <header>
                    <!-- Sidebar -->
                    <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white">
                      <div class="position-sticky">
                        <div class="list-group list-group-flush mx-3 mt-4">
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
                            <i class="fas fa-tachometer-alt fa-fw me-3"></i><span>Main dashboard</span>
                          </a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple active">
                            <i class="fas fa-chart-area fa-fw me-3"></i><span>Webiste traffic</span>
                          </a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-lock fa-fw me-3"></i><span>Password</span></a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-chart-line fa-fw me-3"></i><span>Analytics</span></a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple">
                            <i class="fas fa-chart-pie fa-fw me-3"></i><span>SEO</span>
                          </a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-chart-bar fa-fw me-3"></i><span>Orders</span></a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-globe fa-fw me-3"></i><span>International</span></a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-building fa-fw me-3"></i><span>Partners</span></a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-calendar fa-fw me-3"></i><span>Calendar</span></a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-users fa-fw me-3"></i><span>Users</span></a>
                          <a href="#" class="list-group-item list-group-item-action py-2 ripple"><i
                              class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a>
                        </div>
                      </div>
                    </nav>
                    <!-- Sidebar -->

                    <!-- Navbar -->
                    <nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
                      <!-- Container wrapper -->
                      <div class="container-fluid">
                        <!-- Toggle button -->
                        <button class="navbar-toggler" type="button" data-mdb-collapse-init
                          data-mdb-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
                          aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                        </button>

                        <!-- Brand -->
                        <a class="navbar-brand" href="#">
                          <img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="25" alt=""
                            loading="lazy" />
                        </a>
                        <!-- Search form -->
                        <form class="d-none d-md-flex input-group w-auto my-auto">
                          <input autocomplete="off" type="search" class="form-control rounded"
                            placeholder='Search (ctrl + "/" to focus)' style="min-width: 225px" />
                          <span class="input-group-text border-0"><i class="fas fa-search"></i></span>
                        </form>

                        <!-- Right links -->
                        <ul class="navbar-nav ms-auto d-flex flex-row">
                          <!-- Notification dropdown -->
                          <li class="nav-item dropdown">
                            <a data-mdb-dropdown-init class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#"
                              id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown"
                              aria-expanded="false">
                              <i class="fas fa-bell"></i>
                              <span class="badge rounded-pill badge-notification bg-danger">1</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
                              <li><a class="dropdown-item" href="#">Some news</a></li>
                              <li><a class="dropdown-item" href="#">Another news</a></li>
                              <li>
                                <a class="dropdown-item" href="#">Something else here</a>
                              </li>
                            </ul>
                          </li>

                          <!-- Icon -->
                          <li class="nav-item">
                            <a class="nav-link me-3 me-lg-0" href="#">
                              <i class="fas fa-fill-drip"></i>
                            </a>
                          </li>
                          <!-- Icon -->
                          <li class="nav-item me-3 me-lg-0">
                            <a class="nav-link" href="#">
                              <i class="fab fa-github"></i>
                            </a>
                          </li>

                          <!-- Icon dropdown -->
                          <li class="nav-item dropdown">
                            <a data-mdb-dropdown-init class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdown"
                              role="button" data-mdb-toggle="dropdown" aria-expanded="false">
                              <i class="united kingdom flag m-0"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                              <li>
                                <a class="dropdown-item" href="#"><i class="united kingdom flag"></i>English
                                  <i class="fa fa-check text-success ms-2"></i></a>
                              </li>
                              <li>
                                <hr class="dropdown-divider" />
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>
                              </li>
                            </ul>
                          </li>

                          <!-- Avatar -->
                          <li class="nav-item dropdown">
                            <a data-mdb-dropdown-init class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href="#"
                              id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown"
                              aria-expanded="false">
                              <img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle"
                                height="22" alt="" loading="lazy" />
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
                              <li><a class="dropdown-item" href="#">My profile</a></li>
                              <li><a class="dropdown-item" href="#">Settings</a></li>
                              <li><a class="dropdown-item" href="#">Logout</a></li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                      <!-- Container wrapper -->
                    </nav>
                    <!-- Navbar -->
                  </header>
                  <!--Main Navigation-->

                  <!--Main layout-->
                  <main style="min-height: calc(100vh - 58px);">
                    <div class="container pt-4">

                    </div>
                  </main>
                  <!--Main layout-->

                  <footer class="bg-light text-center text-lg-start">
                    <!-- Copyright -->
                    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
                      © 2020 Copyright:
                      <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
                    </div>
                    <!-- Copyright -->
                  </footer>
                  
        
    
        
            
                      body {
                        background-color: #fbfbfb;
                      }

                      @media (min-width: 991.98px) {
                        main {
                          padding-left: 240px;
                        }
                      }

                      /* Sidebar */
                      .sidebar {
                        position: fixed;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        padding: 58px 0 0;
                        /* Height of navbar */
                        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
                        width: 240px;
                        z-index: 600;
                      }

                      @media (max-width: 991.98px) {
                        .sidebar {
                          width: 100%;
                        }
                      }

                      .sidebar .active {
                        border-radius: 5px;
                        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
                      }

                      .sidebar-sticky {
                        position: relative;
                        top: 0;
                        height: calc(100vh - 48px);
                        padding-top: 0.5rem;
                        overflow-x: hidden;
                        overflow-y: auto;
                        /* Scrollable contents if viewport is shorter than content. */
                      }