admin-lte

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Main Header Component | AdminLTE 3 Documentation</title>  <title>Main Header Component | AdminLTE v3 Documentaion</title> <meta name="generator" content="Jekyll v3.8.5" /> <meta property="og:title" content="Main Header Component" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="AdminLTE v3 Documentaion" /> <meta property="og:description" content="AdminLTE v3 Documentaion" /> <meta property="og:site_name" content="AdminLTE v3 Documentaion" /> <script type="application/ld+json"> {"description":"AdminLTE v3 Documentaion","@type":"WebPage","url":"/components/main-header.html","headline":"Main Header Component","@context":"http://schema.org"}</script>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"> <link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> <link rel="stylesheet" href="/assets/css/docs.css"> <link rel="stylesheet" href="/assets/css/highlighter.css"> <link rel="stylesheet" href="/assets/css/adminlte.min.css"> </head> <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed"> <div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"></a> </li> <li class="nav-item dropdown"> <a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v3.0 </a> <div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown"> <a class="dropdown-item bg-info disabled" href="#">v3.0</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a> <a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a> </div> </li> </ul> <ul class="navbar-nav ml-auto">  </ul>   </nav> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <a href="/index.html" class="brand-link logo-switch"> <img src="/assets/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs"> <img src="/assets/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px"> </a> <div class="sidebar"> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu"> <li class="nav-item "> <a href="/index.html" class="nav-link "> Installation </a> </li> <li class="nav-item "> <a href="/dependencies.html" class="nav-link "> Dependencies & Plugins </a> </li> <li class="nav-item "> <a href="/layout.html" class="nav-link "> Layout </a> </li> <li class="nav-item has-treeview menu-open"> <a href="/components" class="nav-link active"> Components </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/components/main-header.html" class="nav-link active"> Main Header </a> </li> <li class="nav-item"> <a href="/components/main-sidebar.html" class="nav-link "> Main Sidebar </a> </li> <li class="nav-item"> <a href="/components/control-sidebar.html" class="nav-link "> Control Sidebar </a> </li> <li class="nav-item"> <a href="/components/cards.html" class="nav-link "> Card </a> </li> <li class="nav-item"> <a href="/components/boxes.html" class="nav-link "> Small-/ Info-Box </a> </li> <li class="nav-item"> <a href="/components/direct-chat.html" class="nav-link "> Direct Chat </a> </li> <li class="nav-item"> <a href="/components/timeline.html" class="nav-link "> Timeline </a> </li> <li class="nav-item"> <a href="/components/ribbons.html" class="nav-link "> Ribbons </a> </li> <li class="nav-item"> <a href="/components/miscellaneous.html" class="nav-link "> Miscellaneous </a> </li> <li class="nav-item"> <a href="/components/plugins.html" class="nav-link "> Plugins </a> </li> </ul> </li> <li class="nav-item has-treeview "> <a href="/javascript" class="nav-link "> JavaScript </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/javascript/layout.html" class="nav-link "> Layout </a> </li> <li class="nav-item"> <a href="/javascript/push-menu.html" class="nav-link "> Push Menu </a> </li> <li class="nav-item"> <a href="/javascript/treeview.html" class="nav-link "> Treeview </a> </li> <li class="nav-item"> <a href="/javascript/card-widget.html" class="nav-link "> Card Widget </a> </li> <li class="nav-item"> <a href="/javascript/card-refresh.html" class="nav-link "> CardRefresh </a> </li> <li class="nav-item"> <a href="/javascript/control-sidebar.html" class="nav-link "> Control Sidebar </a> </li> <li class="nav-item"> <a href="/javascript/direct-chat.html" class="nav-link "> Direct Chat </a> </li> <li class="nav-item"> <a href="/javascript/todo-list.html" class="nav-link "> Todo List </a> </li> <li class="nav-item"> <a href="/javascript/toasts.html" class="nav-link "> Toasts </a> </li> </ul> </li> <li class="nav-item "> <a href="/browser-support.html" class="nav-link "> Browser Support </a> </li> <li class="nav-item "> <a href="/upgrade-guide.html" class="nav-link "> Upgrade Guide </a> </li> <li class="nav-item "> <a href="/implementations.html" class="nav-link "> Implementations </a> </li> <li class="nav-item "> <a href="/faq.html" class="nav-link "> FAQ </a> </li> <li class="nav-item "> <a href="/license.html" class="nav-link "> License </a> </li> </ul> </nav> </div> </aside> <div class="content-wrapper px-4 py-2"> <div class="content-header"> <h1 class="text-dark">Main Header Component</h1> </div> <div class="content px-2"> <blockquote class="quote-orange mt-0"> <h5>Reminder!</h5> AdminLTE uses all of Bootstrap 4 components. It’s a good start to review the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components that this documentation does not cover. </blockquote> <blockquote class="quote-info"> <h5>Tip!</h5> If you go through the example pages and would like to copy a component, right-click on the component and choose “inspect element” to get to the HTML quicker than scanning the HTML page. </blockquote> The main header contains the navbar. Construction of the navbar differs slightly from Bootstrap because it has components that Bootstrap doesn’t provide. The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide an example for the top nav layout with a logo too. <nav class="navbar navbar-expand navbar-white navbar-light ml-0">  <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"></a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="index3.html" class="nav-link">Home</a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Contact</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"> Help </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">FAQ</a> <a class="dropdown-item" href="#">Support</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Contact</a> </div> </li> </ul>  <form class="form-inline ml-3"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search" /> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> </button> </div> </div> </form>  <ul class="navbar-nav ml-auto">  <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> 3 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <a href="#" class="dropdown-item">  <div class="media"> <img src="/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle" /> <div class="media-body"> <h3 class="dropdown-item-title"> Brad Diesel </h3> Call me whenever you can... 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="media"> <img src="/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3" /> <div class="media-body"> <h3 class="dropdown-item-title"> John Pierce </h3> I got your message bro 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="media"> <img src="/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3" /> <div class="media-body"> <h3 class="dropdown-item-title"> Nora Silvester </h3> The subject goes here 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Messages</a> </div> </li>  <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> 15 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> 15 Notifications <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 4 new messages 3 mins </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 8 friend requests 12 hours </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 3 new reports 2 days </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a> </div> </li> <li class="nav-item"> <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"></a> </li> </ul> </nav> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <nav class="main-header navbar navbar-expand navbar-white navbar-light">  <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="index3.html" class="nav-link">Home</a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Contact</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"> Help </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">FAQ</a> <a class="dropdown-item" href="#">Support</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Contact</a> </div> </li> </ul>  <form class="form-inline ml-3"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"> </button> </div> </div> </form>  <ul class="navbar-nav ml-auto">  <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> <i class="far fa-comments"> <span class="badge badge-danger navbar-badge">3 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <a href="#" class="dropdown-item">  <div class="media"> <img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle"> <div class="media-body"> <h3 class="dropdown-item-title"> Brad Diesel <span class="float-right text-sm text-danger"><i class="fas fa-star"> </h3> <p class="text-sm">Call me whenever you can... <p class="text-sm text-muted"><i class="far fa-clock mr-1"> 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="media"> <img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"> <div class="media-body"> <h3 class="dropdown-item-title"> John Pierce <span class="float-right text-sm text-muted"><i class="fas fa-star"> </h3> <p class="text-sm">I got your message bro <p class="text-sm text-muted"><i class="far fa-clock mr-1"> 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="media"> <img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"> <div class="media-body"> <h3 class="dropdown-item-title"> Nora Silvester <span class="float-right text-sm text-warning"><i class="fas fa-star"> </h3> <p class="text-sm">The subject goes here <p class="text-sm text-muted"><i class="far fa-clock mr-1"> 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Messages</a> </div> </li>  <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> <i class="far fa-bell"> <span class="badge badge-warning navbar-badge">15 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <span class="dropdown-header">15 Notifications <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="fas fa-envelope mr-2"> 4 new messages <span class="float-right text-muted text-sm">3 mins </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="fas fa-users mr-2"> 8 friend requests <span class="float-right text-muted text-sm">12 hours </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="fas fa-file mr-2"> 3 new reports <span class="float-right text-muted text-sm">2 days </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a> </div> </li> <li class="nav-item"> <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i class="fas fa-th-large"></a> </li> </ul> </nav>  </code></pre></div></div> <h4>Top Nav Layout. Main Header Example.</h4> <blockquote class="quote-orange"> <h5>Reminder!</h5> To use this main header instead of the regular one, you must add the <code class="highlighter-rouge">layout-top-nav</code> class to the body tag. </blockquote> Top navbar example can be found in this <a href="https://adminlte.io/themes/dev/AdminLTE/pages/layout/top-nav.html">demo page</a>. <nav class="navbar navbar-expand navbar-light navbar-white"> <div class="container"> <a href="index3.html" class="navbar-brand"> <img src="/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8" /> AdminLTE 3 </a>  <ul class="navbar-nav"> <li class="nav-item"> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="index3.html" class="nav-link">Home</a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Contact</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"> Help </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">FAQ</a> <a class="dropdown-item" href="#">Support</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Contact</a> </div> </li> </ul>  <form class="form-inline ml-3"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search" /> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> </button> </div> </div> </form>  <ul class="navbar-nav ml-auto">  <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> 3 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <a href="#" class="dropdown-item">  <div class="media"> <img src="/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle" /> <div class="media-body"> <h3 class="dropdown-item-title"> Brad Diesel </h3> Call me whenever you can... 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="media"> <img src="/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3" /> <div class="media-body"> <h3 class="dropdown-item-title"> John Pierce </h3> I got your message bro 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="media"> <img src="/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3" /> <div class="media-body"> <h3 class="dropdown-item-title"> Nora Silvester </h3> The subject goes here 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Messages</a> </div> </li>  <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#"> 15 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> 15 Notifications <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 4 new messages 3 mins </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 8 friend requests 12 hours </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 3 new reports 2 days </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a> </div> </li> <li class="nav-item"> <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"></a> </li> </ul> </div> </nav> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <nav class="main-header navbar navbar-expand navbar-light navbar-white"> <div class="container"> <a href="index3.html" class="navbar-brand"> <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> <span class="brand-text font-weight-light">AdminLTE 3 </a>  <ul class="navbar-nav"> <li class="nav-item"> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="index3.html" class="nav-link">Home</a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Contact</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"> Help </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">FAQ</a> <a class="dropdown-item" href="#">Support</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Contact</a> </div> </li> </ul>  <form class="form-inline ml-3"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"> </button><