Navigation

Standard Component

    
      <nav class="navbar navbar-expand-lg atp-navbar" aria-label="Main">
    <div class="container">
  
      <div class="row no-gutters w-100 mb-lg-2">
  
        <div class="col d-flex align-items-center">
  
          <button class="navbar-toggler mr-2 px-1" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="lmp-icon icon-lg" aria-hidden="true">menu</i>
          </button>
  
          <a class="navbar-brand d-none d-lg-inline-block" href="#">
            Aviation Training Portal
          </a>
  
          <div class="navbar-title d-lg-none">
            [Active Navigation Indicator]
          </div>
  
        </div>
  
        <div class="col-auto">
  
          <ul class="navbar-nav navbar-icon-nav justify-content-end">
            <li class="nav-item d-none d-sm-block">
              <a class="nav-link" href="#">
                <i class="lmp-icon icon-lg" aria-hidden="true">help_outline</i>
                <span class="sr-only">Help Center</span>
              </a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="lmp-icon icon-lg" aria-hidden="true">apps</i>
                <span class="sr-only">Applications Menu</span>
              </a>
              <div class="dropdown-menu dropdown-menu-right atp-nav-dropdown" aria-labelledby="navbarDropdown">
                <h6 class="dropdown-header">Portal</h6>
                <a class="dropdown-item" href="#">MyBoeingFleet</a>
                <div class="dropdown-divider"></div>
                <h6 class="dropdown-header">Applications</h6>
                <a class="dropdown-item" href="#">Application 1</a>
                <a class="dropdown-item" href="#">Application 2</a>
                <a class="dropdown-item" href="#">Application 3</a>
                <a class="dropdown-item" href="#">More Applications</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="accountMenuDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="lmp-icon icon-lg" aria-hidden="true">account_circle</i>
                <span class="sr-only">Account Menu</span>
              </a>
              <div class="dropdown-menu dropdown-menu-right atp-nav-dropdown pb-0" aria-labelledby="accountMenuDropdown">
                <div class="h5 font-weight-bold mb-1 px-4">FirstName LastName</div>
                <div class="dropdown-small-text">firstname.lastname@company.com</div>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">MBF Account Details</a>
                <a href="#" class="dropdown-item dropdown-btn mt-4">Log Out</a>
              </div>
            </li>
          </ul>
  
        </div>
  
      </div>
  
      <div class="collapse navbar-collapse" id="atpNavbarContent">
  
        <div class="row d-lg-none pt-lg-1">
          <div class="col py-3 pl-4">
            <img src="../../../../assets/images/boeing-logo.svg" width="145" height="34" alt="Boeing" loading="lazy" style="width: 150px; display: block; height: auto;">
          </div>
          <div class="col-auto py-3 pr-2">
            <button class="navbar-toggler text-dark" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Close navigation">
              <i class="lmp-icon icon-lg" aria-hidden="true">close</i>
            </button>
          </div>
          <div class="col-12 border-top border-bottom py-1 px-3">
            <a class="navbar-brand-mobile" href="#">Aviation Training Portal</a>
          </div>
        </div>
  
        <div class="row no-gutters">
          <div class="col-12">
  
            <ul class="navbar-nav navbar-link-nav">
              <li class="nav-item active">
                <a class="nav-link" href="#">Products &amp; Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Materials</a>
              </li>
              <li class="nav-item d-sm-none border-top mt-1 pt-2">
                <a href="#" class="nav-link d-flex align-items-center">
                  <i class="lmp-icon mr-2" aria-hidden="true">help_outline</i> Help Center
                </a>
              </li>
            </ul>
  
          </div>
        </div>
  
      </div>
  
    </div>
  </nav>