Navbar

Preview
HTML

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y mb-3">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenu" data-toggle="collapse" data-target="#navbarNavMenu">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenu">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="dropdown">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="dropdown-menu" aria-labelledby="dropdownSubMenu" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="nav-item">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="megaMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="navbar-nav-mega-menu dropdown-menu" aria-labelledby="megaMenu">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-light mb-3">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuLightEg" data-toggle="collapse" data-target="#navbarNavMenuLightEg">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenuLightEg">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="dropdown">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenuLightEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="dropdown-menu" aria-labelledby="dropdownSubMenuLightEg" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="nav-item">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="megaMenuLightEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="navbar-nav-mega-menu dropdown-menu" aria-labelledby="megaMenuLightEg">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-dark">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuDarkEg" data-toggle="collapse" data-target="#navbarNavMenuDarkEg">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenuDarkEg">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="dropdown">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenuDarkEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="dropdown-menu" aria-labelledby="dropdownSubMenuDarkEg" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="nav-item">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="megaMenuDarkEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="navbar-nav-mega-menu dropdown-menu" aria-labelledby="megaMenuDarkEg">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

Preview
HTML

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-fixed navbar-height navbar-bordered">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuHeightEg" data-toggle="collapse" data-target="#navbarNavMenuHeightEg">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenuHeightEg">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="dropdown">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenuHeightEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="dropdown-menu" aria-labelledby="dropdownSubMenuHeightEg" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="nav-item">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="megaMenuHeightEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="navbar-nav-mega-menu dropdown-menu" aria-labelledby="megaMenuHeightEg">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

Preview
HTML

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-fixed navbar-bordered">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuFixedEg" data-toggle="collapse" data-target="#navbarNavMenuFixedEg">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenuFixedEg">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="dropdown">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenuFixedEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="dropdown-menu" aria-labelledby="dropdownSubMenuFixedEg" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="nav-item">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="megaMenuFixedEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="navbar-nav-mega-menu dropdown-menu" aria-labelledby="megaMenuFixedEg">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

Preview
HTML

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-bordered">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuBorderedEg" data-toggle="collapse" data-target="#navbarNavMenuBorderedEg">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenuBorderedEg">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="dropdown">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenuBorderedEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="dropdown-menu" aria-labelledby="dropdownSubMenuBorderedEg" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="nav-item">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="megaMenuBorderedEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="navbar-nav-mega-menu dropdown-menu" aria-labelledby="megaMenuBorderedEg">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

Preview
HTML

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-shadow">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuShadowEg" data-toggle="collapse" data-target="#navbarNavMenuShadowEg">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenuShadowEg">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="dropdown">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenuShadowEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="dropdown-menu" aria-labelledby="dropdownSubMenuShadowEg" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="nav-item">
                                  <a class="nav-link nav-link-toggle" href="javascript:;" id="megaMenuShadowEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="navbar-nav-mega-menu dropdown-menu" aria-labelledby="megaMenuShadowEg">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

Preview
HTML

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-light">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

Preview
HTML

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-light">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo-short" src="../assets/svg/logos/logo-short.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

This example uses HS Mega Menu library.

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-light">
                        <div class="container">
                          <div class="js-mega-menu navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Toggle -->
                            <button type="button" class="navbar-toggler btn btn-ghost-secondary rounded-circle ml-auto" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuWithMegaMenuEg" data-toggle="collapse" data-target="#navbarNavMenuWithMegaMenuEg">
                              <i class="tio-menu-hamburger"></i>
                            </button>
                            <!-- End Toggle -->

                            <nav class="collapse navbar-collapse" id="navbarNavMenuWithMegaMenuEg">
                              <!-- Navbar -->
                              <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Active</a>
                                </li>

                                <!-- Dropdown -->
                                <li class="hs-has-sub-menu dropdown">
                                  <a class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" id="withMegaMenuDropdownEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                  <div class="hs-sub-menu dropdown-menu" aria-labelledby="withMegaMenuDropdownEg" style="min-width: 230px;">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>

                                    <!-- Dropdown -->
                                    <div class="hs-has-sub-menu">
                                      <a class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" id="withMegaMenuDropdownSubEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub dropdown</a>

                                      <div class="hs-sub-menu dropdown-menu" aria-labelledby="withMegaMenuDropdownSubEg" style="min-width: 230px;">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                    </div>
                                    <!-- End Dropdown -->
                                  </div>
                                </li>
                                <!-- End Dropdown -->

                                <!-- Nav Item -->
                                <li class="hs-has-mega-menu nav-item">
                                  <a class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" id="withMegaMenuEg" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega menu</a>

                                  <div class="hs-mega-menu navbar-nav-mega-menu dropdown-menu" aria-labelledby="withMegaMenuEg">
                                    <div class="row navbar-nav-mega-menu-body">
                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">One</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Two</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>

                                      <div class="col-lg-3 mb-3 mb-lg-0">
                                        <span class="navbar-nav-mega-menu-title h5">Three</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                      </div>

                                      <div class="col-lg-3">
                                        <span class="navbar-nav-mega-menu-title h5">Four</span>

                                        <a class="dropdown-item" href="#">One</a>
                                        <a class="dropdown-item" href="#">Two</a>
                                        <a class="dropdown-item" href="#">Three</a>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                                <!-- End Nav Item -->

                                <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </nav>
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

                    
                      <link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">

                    
                      <!-- JS Implementing Plugins -->
                      <script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>

                      <script>
                        $(document).on('ready', function () {
                          // initialization of mega menu
                          var megaMenu = new HSMegaMenu($('.js-mega-menu'), {
                            desktop: {
                              position: 'left'
                            }
                          }).init();
                        });
                      </script>

This example uses Unfold library.

                    
                      <!-- Header -->
                      <header class="navbar navbar-expand-lg navbar-spacer-y navbar-light">
                        <div class="container">
                          <div class="navbar-nav-wrap">
                            <div class="navbar-brand-wrapper">
                              <!-- Logo -->
                              <a class="navbar-brand" href="../index.html" aria-label="Front">
                                <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->
                            </div>

                            <!-- Secondary Content -->
                            <div class="navbar-nav-wrap-content-right">
                              <!-- Navbar -->
                              <ul class="navbar-nav align-items-center flex-row">
                                <li class="nav-item">
                                  <!-- Account -->
                                  <div class="hs-unfold">
                                    <a class="js-hs-unfold-invoker navbar-dropdown-account-wrapper" href="javascript:;"
                                       data-hs-unfold-options='{
                                         "target": "#accountNavbarDropdown",
                                         "type": "css-animation"
                                       }'>
                                      <div class="avatar avatar-sm avatar-circle">
                                        <img class="avatar-img" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                                        <span class="avatar-status avatar-sm-status avatar-status-success"></span>
                                      </div>
                                    </a>

                                    <div id="accountNavbarDropdown" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-right navbar-dropdown-menu navbar-dropdown-account" style="width: 16rem;">
                                      <div class="dropdown-item">
                                        <div class="media align-items-center">
                                          <div class="avatar avatar-sm avatar-circle mr-2">
                                            <img class="avatar-img" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                                          </div>
                                          <div class="media-body">
                                            <span class="card-title h5">Mark Williams</span>
                                            <span class="card-text">mark@example.com</span>
                                          </div>
                                        </div>
                                      </div>

                                      <div class="dropdown-divider"></div>

                                      <!-- Unfold -->
                                      <div class="hs-unfold w-100">
                                        <a class="js-hs-unfold-invoker navbar-dropdown-submenu-item dropdown-item d-flex align-items-center" href="javascript:;"
                                           data-hs-unfold-options='{
                                             "target": "#navSubmenuPagesAccountDropdown1",
                                             "event": "hover"
                                           }'>
                                          <span class="text-truncate pr-2" title="Set status">Set status</span>
                                          <i class="tio-chevron-right navbar-dropdown-submenu-item-invoker  ml-auto"></i>
                                        </a>

                                        <div id="navSubmenuPagesAccountDropdown1" class="hs-unfold-content hs-unfold-has-submenu dropdown-unfold dropdown-menu navbar-dropdown-sub-menu">
                                          <a class="dropdown-item" href="#">
                                            <span class="legend-indicator bg-success mr-1"></span>
                                            <span class="text-truncate pr-2" title="Available">Available</span>
                                          </a>
                                          <a class="dropdown-item" href="#">
                                            <span class="legend-indicator bg-danger mr-1"></span>
                                            <span class="text-truncate pr-2" title="Busy">Busy</span>
                                          </a>
                                          <a class="dropdown-item" href="#">
                                            <span class="legend-indicator bg-warning mr-1"></span>
                                            <span class="text-truncate pr-2" title="Away">Away</span>
                                          </a>
                                          <div class="dropdown-divider"></div>
                                          <a class="dropdown-item" href="#">
                                            <span class="text-truncate pr-2" title="Reset status">Reset status</span>
                                          </a>
                                        </div>
                                      </div>
                                      <!-- End Unfold -->

                                      <a class="dropdown-item" href="#">
                                        <span class="text-truncate pr-2" title="Profile & account">Profile & account</span>
                                      </a>

                                      <a class="dropdown-item" href="#">
                                        <span class="text-truncate pr-2" title="Settings">Settings</span>
                                      </a>

                                      <div class="dropdown-divider"></div>

                                      <a class="dropdown-item" href="#">
                                        <div class="media align-items-center">
                                          <div class="avatar avatar-sm avatar-dark avatar-circle mr-2">
                                            <span class="avatar-initials">HS</span>
                                          </div>
                                          <div class="media-body">
                                            <span class="card-title h5">Htmlstream <span class="badge badge-primary badge-pill text-uppercase ml-1">PRO</span></span>
                                            <span class="card-text">hs.example.com</span>
                                          </div>
                                        </div>
                                      </a>

                                      <div class="dropdown-divider"></div>

                                      <!-- Unfold -->
                                      <div class="hs-unfold w-100">
                                        <a class="js-hs-unfold-invoker navbar-dropdown-submenu-item dropdown-item d-flex align-items-center" href="javascript:;"
                                           data-hs-unfold-options='{
                                             "target": "#navSubmenuPagesAccountDropdown2",
                                             "event": "hover"
                                           }'>
                                          <span class="text-truncate pr-2" title="Customization">Customization</span>
                                          <i class="tio-chevron-right navbar-dropdown-submenu-item-invoker  ml-auto"></i>
                                        </a>

                                        <div id="navSubmenuPagesAccountDropdown2" class="hs-unfold-content hs-unfold-has-submenu dropdown-unfold dropdown-menu navbar-dropdown-sub-menu">
                                          <a class="dropdown-item" href="#">
                                            <span class="text-truncate pr-2" title="Invite people">Invite people</span>
                                          </a>
                                          <a class="dropdown-item" href="#">
                                            <span class="text-truncate pr-2" title="Analytics">Analytics</span>
                                            <i class="tio-open-in-new"></i>
                                          </a>
                                          <a class="dropdown-item" href="#">
                                            <span class="text-truncate pr-2" title="Customize Front">Customize Front</span>
                                            <i class="tio-open-in-new"></i>
                                          </a>
                                        </div>
                                      </div>
                                      <!-- End Unfold -->

                                      <a class="dropdown-item" href="#">
                                        <span class="text-truncate pr-2" title="Manage team">Manage team</span>
                                      </a>

                                      <div class="dropdown-divider"></div>

                                      <a class="dropdown-item" href="#">
                                        <span class="text-truncate pr-2" title="Sign out">Sign out</span>
                                      </a>
                                    </div>
                                  </div>
                                  <!-- End Account -->
                                </li>
                              </ul>
                              <!-- End Navbar -->
                            </div>
                            <!-- End Secondary Content -->
                          </div>
                        </div>
                      </header>
                      <!-- End Header -->

                    
                      <!-- JS Implementing Plugins -->
                      <script src="../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>

                      <script>
                        $(document).on('ready', function () {
                          // initialization of unfold
                          $('.js-hs-unfold-invoker').each(function () {
                            var unfold = new HSUnfold($(this)).init();
                          });
                        });
                      </script>

Preview
HTML

                    
                      <!-- Navbar Vertical -->
                      <div class="navbar navbar-vertical" style="max-width: 16rem;">
                        <!-- Navbar -->
                        <ul class="navbar-nav navbar-nav-lg nav-tabs">
                          <li class="nav-item">
                            <a class="nav-link active" href="#">Active</a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">Pages</a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">Users</a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">Settings</a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                          </li>
                        </ul>
                        <!-- End Navbar -->
                      </div>
                      <!-- End Navbar Vertical -->

Preview
HTML

                    
                      <!-- Navbar Vertical -->
                      <div class="navbar navbar-vertical" style="max-width: 16rem;">
                        <!-- Navbar -->
                        <ul class="navbar-nav navbar-nav-lg">
                          <li class="nav-item">
                            <a class="nav-link active" href="#">
                              <i class="tio-visible-outlined nav-icon"></i> Active
                            </a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link nav-link-toggle" href="#sidebarPagesCollapseableMenuEg" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarPagesCollapseableMenuEg">
                              <i class="tio-pages-outlined nav-icon"></i> Pages
                            </a>

                            <div class="collapse" id="sidebarPagesCollapseableMenuEg">
                              <ul class="nav flex-column">
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Users
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Profile
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Settings
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-apps nav-icon"></i> Apps <span class="badge badge-primary badge-pill ml-1">7</span>
                            </a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-tune nav-icon"></i> Settings
                            </a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-sign-out nav-icon"></i> Log out
                            </a>
                          </li>
                        </ul>
                        <!-- End Navbar -->
                      </div>
                      <!-- End Navbar Vertical -->

Preview
HTML

                    
                      <!-- Navbar Vertical -->
                      <div class="navbar navbar-vertical" style="max-width: 16rem;">
                        <!-- Navbar -->
                        <ul class="navbar-nav navbar-nav-lg nav-tabs card card-navbar-nav">
                          <li class="nav-item">
                            <small class="nav-subtitle">Account</small>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link active" href="#">
                              <i class="tio-visible-outlined nav-icon"></i> Active
                            </a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link nav-link-toggle" href="#sidebarPagesCardEg" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarPagesCardEg">
                              <i class="tio-pages-outlined nav-icon"></i> Pages
                            </a>

                            <div class="collapse" id="sidebarPagesCardEg">
                              <ul class="nav flex-column">
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Users
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Profile
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Settings
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-apps nav-icon"></i> Apps <span class="badge badge-primary badge-pill ml-1">7</span>
                            </a>
                          </li>

                          <li class="nav-item">
                            <div class="nav-divider"></div>
                          </li>

                          <li class="nav-item">
                            <small class="nav-subtitle">Account</small>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-tune nav-icon"></i> Settings
                            </a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-sign-out nav-icon"></i> Log out
                            </a>
                          </li>
                        </ul>
                        <!-- End Navbar -->
                      </div>
                      <!-- End Navbar Vertical -->

Preview
HTML

                    
                      <!-- Navbar Vertical -->
                      <div class="navbar navbar-vertical navbar-expand-md" style="max-width: 16rem;">
                        <!-- Navbar -->
                        <ul class="navbar-nav navbar-nav-lg nav-tabs card card-navbar-nav">
                          <li class="nav-item">
                            <small class="nav-subtitle">Account</small>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link active" href="#">
                              <i class="tio-visible-outlined nav-icon"></i> Active
                            </a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link nav-link-toggle" href="#sidebarPagesWithTogglerEg" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarPagesWithTogglerEg">
                              <i class="tio-pages-outlined nav-icon"></i> Pages
                            </a>

                            <div class="collapse" id="sidebarPagesWithTogglerEg">
                              <ul class="nav flex-column">
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Users
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Profile
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">
                                    <span class="nav-dot"></span> Settings
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-apps nav-icon"></i> Apps <span class="badge badge-primary badge-pill ml-1">7</span>
                            </a>
                          </li>

                          <li class="nav-item">
                            <div class="nav-divider"></div>
                          </li>

                          <li class="nav-item">
                            <small class="nav-subtitle">Account</small>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-tune nav-icon"></i> Settings
                            </a>
                          </li>

                          <li class="nav-item">
                            <a class="nav-link" href="#">
                              <i class="tio-sign-out nav-icon"></i> Log out
                            </a>
                          </li>
                        </ul>
                        <!-- End Navbar -->
                      </div>
                      <!-- End Navbar Vertical -->

Class	Description
`.navbar-container`	Includes the `padding-left` and `padding-right` value of the main content to align the `navbar` with the main content.
`.navbar-flush`	Used for proper alignment when used along with the `.navbar-vertical-aside`.
`.navbar-brand-wrapper-width`	Sets fixed width in the size of the `.navbar-vertical-aside`, so the rest content aligns with the size of the main content. Example: Sidebar detached fluid layout
`.navbar-body`	Sets fixed height and `overflow-y: auto;` and used in tandem with the `.navbar-fixed` where the height of the content exceeds the viewport of the screen. Example: Header default fluid layout

Basic

Height

Fixed

Bordered

Shadow

Brand

With `hs-mega-menu.js`

Vertical

Collapseable menu

Card

Toggler

Other classes to note

Navbar

Basic

Height

Fixed

Bordered

Shadow

Brand

With hs-mega-menu.js

User dropdown

Vertical

Collapseable menu

Card

Toggler

Other classes to note

With `hs-mega-menu.js`