Dashboard Starter Template With jQuery And Bootstrap
File Size: | 241 KB |
---|---|
Views Total: | 1603 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal clean dashboard starter template with a flexible & collapsible side navigation that can be used to create a professional admin panel in your next web project.
How to use it:
1. Load the required jQuery library and Bootstrap 4 framework in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Load the core stylesheet style.css
for the dashboard template.
<link rel="stylesheet" href="style.css" />
3. Load the stylesheet colors.css
to override the default Bootstrap styles. OPTIONAL.
<link rel="stylesheet" href="colors.css" />
4. Load the Material Design Iconic Fonts for the dashboard template. OPTIONAL.
<link rel="stylesheet" href="colors.css" />
5. The example HTML structure for the dashboard template.
<!-- Page wrapper --> <div class="d-flex flex-column flex-grow-1 overflow-hidden bg-light txt-dark page-wrapper"> <!-- Navbar wrapper --> <div class="d-flex flex-row flex-shrink-0" role="navigation"> <!-- Navbar--> <nav class="d-flex flex-row flex-grow-1 navbar sticky-top navbar-light bg-white p-0"> <div id="sidebarToggle" class="animated-burger-menu open mx-3"> <span class="bg-dark-secondary"></span> <span class="bg-dark-secondary"></span> <span class="bg-dark-secondary"></span> <span class="bg-dark-secondary"></span> </div> <!-- Brand --> <div id="brand" class="d-flex flex-column flex-grow-1 brand-content px-2"> <a id="navbar-brand" class="navbar-brand d-flex align-items-center p-0 m-0" href="#"> <img src="img/logo anker.jpg" class="navbar-image py-2" alt="" loading="lazy"> <span class="ml-3 font-weight-bold txt-primary">Seacrew</span> </a> </div> <div class="d-flex flex-column flex-grow-0 dropdown h-100 mr-2"> <a class="btn btn-clean txt-dark dropdown-toggle d-flex align-items-center h-100" href="#" role="button" id="profileDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="https://colorlib.com/polygon/gentelella/images/img.jpg" width="30" height="30" alt="" class="rounded-circle"> <span class="pl-2 pr-2">John Doe</span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="profileDropdownMenu"> <a class="dropdown-item" href="#"><i class="zmdi zmdi-account pr-2"></i>Profile</a> <a class="dropdown-item" href="#"><i class="zmdi zmdi-close-circle pr-2"></i>Logout</a> </div> </div> </nav> </div> <!-- Content wrapper --> <div class="d-flex flex-row flex-grow-1 overflow-hidden"> <!-- Sidebar container--> <aside id="sidebar-container" class="d-flex flex-column bg-light-secondary sidebar-container"> <!-- Sidebar content --> <div id="sidebar" class="d-flex flex-column flex-grow-1 sidebar-content expanded"> <!-- Sidebar header --> <div class="d-flex flex-shrink-0 collapsible-section py-1 sidebar-header"> <div class="d-flex flex-row flex-grow-1 align-items-center overflow-hidden"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon"> <i class="zmdi zmdi-boat zmdi-hc-2x"></i> </span> <span class="flex-grow-1 expanded-only font-weight-bold">Company</span> </div> <!-- Dropright button --> <div id="sidebarAdd" class="d-flex flex-column flex-shrink-0 position-relative btn-group dropright"> <a href="" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center txt-dark sidebar-icon"> <i class="zmdi zmdi-plus zmdi-hc-2x"></i> </span> </a> <div class="dropdown-menu position-absolute"> <a class="dropdown-item" href="#">Add something</a> </div> </div> </div> <!-- Seperator --> <div class="separator flex-row flex-shrink-0"></div> <!-- Sidebar middle section --> <!-- Dashboard, New Applicants, Crew Data, Crew on board, Planning, Companies --> <!-- Codes(Generic, Ranks), Users(Users, Groups), Triggers(Qualifications per rank) --> <!-- Authorization(Employees, Vessels), Reports(Nationalities, Ranks, Age categories) --> <div class="d-flex flex-column flex-grow-1 sidebar-middle py-2"> <div class="d-flex flex-column flex-shrink-0 position-relative"> <a href="#" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item active"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-primary"> <i class="zmdi zmdi-view-dashboard zmdi-hc-2x"></i> </span> <span class="flex-grow-1 expanded-only">Dashboard</span> </a> </div> <div class="d-flex flex-column flex-shrink-0 position-relative"> <a href="#" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-success"> <i class="zmdi zmdi-globe zmdi-hc-2x"></i> </span> <span class="flex-grow-1 expanded-only">Globe</span> </a> </div> <div class="d-flex flex-column flex-shrink-0 position-relative"> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item dropdown-toggle"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-danger"> <i class="zmdi zmdi-google-pages zmdi-hc-2x"></i> </span> <span class="flex-grow-1 expanded-only">Pages</span> </a> <ul class="collapse list-unstyled sidebar-sub-items m-0" id="pageSubmenu"> <li> <a href="#" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon"> <i class="zmdi zmdi-collection-item"></i> </span> <span class="flex-grow-1 expanded-only">Page 1</span> </a> </li> <li> <a href="#" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon"> <i class="zmdi zmdi-collection-item"></i> </span> <span class="flex-grow-1 expanded-only">Page 2</span> </a> </li> </ul> </div> <div class="d-flex flex-column flex-shrink-0 position-relative"> <a href="#" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-info"> <i class="zmdi zmdi-assignment-check zmdi-hc-2x"></i> </span> <span class="flex-grow-1 expanded-only">Tasks</span> </a> </div> <div class="d-flex flex-column flex-shrink-0 position-relative"> <a href="#" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-warning"> <i class="zmdi zmdi-fire zmdi-hc-2x"></i> </span> <span class="flex-grow-1 expanded-only">Fire</span> </a> </div> <!-- Dropright button --> <div class="d-flex flex-column flex-shrink-0 position-relative btn-group dropright"> <a href="" class="d-flex flex-row flex-grow-1 align-items-center position-relative pl-0 txt-dark sidebar-item dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center txt-dark sidebar-icon"> <i class="zmdi zmdi-chart zmdi-hc-2x"></i> </span> <span class="flex-grow-1 expanded-only">Chart</span> </a> <div class="dropdown-menu position-absolute"> <a class="dropdown-item" href="#">Chart</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated chart</a> </div> </div> </div> <!-- Seperator --> <div class="separator flex-row flex-shrink-0"></div> <!-- Sidebar bottom section --> <div class="d-flex flex-shrink-0 collapsible-section py-2"> <a href="#" class="d-flex flex-row flex-grow-1 align-items-center overflow-hidden position-relative txt-dark sidebar-item"> <span> <i class="zmdi zmdi-settings zmdi-hc-2x d-flex flex-row align-items-center justify-content-center flex-shrink-0 sidebar-icon"></i> </span> <span class="expanded-only">Settings</span> </a> <div id="sidebarCollapse" class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon py-2"> <i class="zmdi zmdi-chevron-left zmdi-hc-2x"></i> </div> </div> </div> </aside> <!-- Main container--> <main id="main-container" class="d-flex flex-column flex-grow-1 overflow-hidden main-container"> <!-- Main content --> <div class="d-flex flex-column flex-grow-1 main-content"> <!-- Main header --> <div class="d-flex flex-shrink-0 main-header"> <div class="container-fluid pt-5"> <div class="row"> <div class="col-12"> <h2>Dashboard</h2> </div> </div> </div> </div> <!-- Main middle section --> <div class="d-flex flex-column flex-grow-1 main-middle"> <div class="container-fluid pt-3"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 py-3"> <div class="card"> <div class="card-header">Featured</div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer text-muted">2 days ago</div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 py-3"> <div class="mat-card bg-white"> <div class="d-flex flex-row align-items-center"> <div class="d-flex flex-column flex-grow-1 justify-content-center"> <h3 class="txt-dark">225,000</h3> <span>New users.</span> </div> <div class="d-flex flex-column justify-content-center"> <i class="zmdi zmdi-account-add zmdi-hc-4x card-icon"></i> </div> </div> </div> </div> </div> </div> </div> </div> </main> </div> </div>
6. The necessary JavaScript (jQuery script) to activate the sidebar nav.
// Define variables var sidebarCollapse = $("#sidebarCollapse"); var sidebarToggle = $("#sidebarToggle"); var sidebarContent = $("#sidebar"); var sidebarContainer = $("#sidebar-container"); var mainContainer = $("#main-container"); var mql = window.matchMedia("(max-width: 768px)"); // init screen responsive(mql); // Add media listener mql.addEventListener("change", responsive); // sidebarCollapse event listener sidebarCollapse.on("click", () => { sidebarContent.toggleClass("expanded"); sidebarCollapse.toggleClass("rotated-icon"); }); // sidebarToggle event listener sidebarToggle.on("click", () => { var sidebarContainerMargin = parseInt(sidebarContainer.css("marginLeft").replace('px', '')); (sidebarContainerMargin == 0) ? closeSidebar() : openSidebar(); }); // Opens sidebar function openSidebar() { sidebarContainer.css('margin-left', 0); mainContainer.css('left', '48px'); sidebarToggle.addClass('open'); } // Closes sidebar function closeSidebar() { sidebarContainer.css('margin-left', - sidebarContainer.width()); mainContainer.css('left', 0); sidebarToggle.removeClass('open'); } // Sets correct styling based on screen width function responsive(mql) { if (mql.matches) { // Small screen addInlineStyling(); closeSidebar(); } else { // Large screen removeInlineStyling(); openSidebar(); } } // Adds styling for main container function addInlineStyling() { mainContainer.css('position', 'absolute'); mainContainer.css('bottom', 0); mainContainer.css('right', 0); mainContainer.css('top', '48px'); if (sidebarContainer.css('margin-left') == '0px') { mainContainer.css('left', '48px'); } else { mainContainer.css('left', '0px'); } } // Removes styling for main function removeInlineStyling() { mainContainer.removeAttr("style"); sidebarContainer.removeAttr("style"); }
This awesome jQuery plugin is developed by patricknnn. For more Advanced Usages, please check the demo page or visit the official website.