jQuery Plugins › jQuery Other Plugins ›

Minimal Dashboard Skeleton Based On Bootstrap 5/4

File Size: 24.5 KB
Views Total: 4171
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap 5#Bootstrap#bootstrap 4#Dashboard#Admin Panel
Minimal Dashboard Skeleton Based On Bootstrap 5/4

A tiny dashboard skeleton that helps developers to quickly create a minimal clean back-end dashboard and admin panel using jQuery and Bootstrap 5/4 framework.

How to use it:

1. Load the necessary JavaScript & CSS files into the document:

<!-- jQuery + Bootstrap -->
<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>

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/all.min.css" />

<!-- Sidebar menu -->
<link rel="stylesheet" href="sidebar-skeleton-compostrap/dist/css/sidebar.css" />
<link rel="stylesheet" href="sidebar-menu-compostrap/dist/css/sidebar.menu.css" />
<script src="sidebar-skeleton-compostrap/dist/js/sidebar.js"></script>

<!-- jquery.perfect-scrollbar -->
<link rel="stylesheet" href="/path/to/cdn/perfect-scrollbar.css" />
<script src="/path/to/cdn/perfect-scrollbar.min.js"></script>

<!-- nanobar -->
<script src="/path/to/cdn/nanobar.min.js"></script>

2. Load the Dashboard Skeleton's stylesheet in the document.

<link rel="stylesheet" href="dist/css/dashboard.css">

3. The HTML structure for the dashboard skeleton.

<header>
  <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <!-- title -->
    <a class="navbar-brand" href="#"><i class="fas fa-mug-hot mr-1 text-purple"></i>
    <span class="text-purple text-bolder">Dashboard</span>
    </a>
    <!-- sidebar toggle -->
    <button class="navbar-toggler btn btn-link border-0" type="button" id="sidebar" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <!-- navbar navigation -->
    <div class="collapse navbar-collapse">
      <!-- breadcrumb -->
      <ul class="navbar-nav navbar-nav-breadcrumb">
        <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#">Translate</a></li>
      </ul>
    </div>
  </nav>
</header>
<div class="d-flex wrapper wrapper-navbar-used wrapper-navbar-fixed">
  <nav role="navigation" class="sidebar sidebar-bg-white sidebar-rounded-top-right shadow-sm" id="navigation">
    <!-- sidebar -->
    <div class="sidebar-menu">
      <!-- menu fixed -->
      <div class="sidebar-menu-fixed">
        <!-- menu scrollbar -->
        <div class="scrollbar scrollbar-use-navbar scrollbar-bg-white">
          <!-- menu -->
          <ul class="list list-unstyled list-bg-white mb-0">
            <li class="list-item">
              <!-- list title -->
              <p class="list-title text-uppercase">User logged</p>
              <!-- list items, first level -->
              <ul class="list-unstyled">
                <li>
                  <a href="#" class="list-link link-arrow text-uppercase"><span class="list-icon"><i class="far fa-user"></i></span>S. Karlos</a>
                  <!-- list items, second level -->
                  <ul class="list-unstyled list-hidden">
                    <li><a href="#" class="list-link">Your profil</a></li>
                    <li><a href="#" class="list-link">Logout</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <!-- menu -->
          <ul class="list list-unstyled list-bg-white list-icon-purple mb-0">
            <!-- multi-level dropdown menu -->
            <li class="list-item">
              <!-- list title -->
              <p class="list-title text-uppercase">System</p>
              <!-- list items -->
              <ul class="list-unstyled">
                <li><a href="#" class="list-link link-current"><span class="list-icon"><i class="fas fa-mug-hot"></i></span>Dashboard</a></li>
                <li>
                  <a href="#" class="list-link link-arrow"><span class="list-icon"><i class="fas fa-hammer"></i></span>Settings</a>
                  <!-- list items, second level -->
                  <ul class="list-unstyled list-hidden">
                    <li><a href="#" class="list-link">Permissions</a></li>
                    <li>
                      <a href="#" class="list-link link-arrow">Maintenance</a>
                      <!-- list items, third level -->
                      <ul class="list-unstyled list-hidden">
                        <li><a href="#" class="list-link">On</a></li>
                        <li><a href="#" class="list-link">Off</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <!-- comments -->
                <li>
                  <a href="#" class="list-link link-arrow"><span class="list-icon"><i class="far fa-comment"></i></span>Comments</a>
                  <!-- list items, second level -->
                  <ul class="list-unstyled list-hidden">
                    <li><a href="#" class="list-link">Disable</a></li>
                    <li><a href="#" class="list-link">Enable</a></li>
                  </ul>
                </li>
                <!-- translate -->
                <li>
                  <a href="#" class="list-link link-arrow link-current"><span class="list-icon"><i class="fas fa-globe"></i></span>Translate</a>
                  <!-- list items, second level -->
                  <ul class="list-unstyled list-hidden">
                    <li><a href="#" class="list-link">Czech</a></li>
                    <li><a href="#" class="list-link link-current">English</a></li>
                    <li><a href="#" class="list-link">Germany</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <!-- multi-level dropdown menu -->
            <li class="list-item">
              <!-- list title -->
              <p class="list-title text-uppercase">Eshop</p>
              <!-- list items -->
              <ul class="list-unstyled">
                <li>
                  <a href="#" class="list-link link-arrow"><span class="list-icon"><i class="fas fa-shopping-basket"></i></span>Orders</a>
                  <!-- list items, second level -->
                  <ul class="list-unstyled list-hidden">
                    <li><a href="#" class="list-link">New</a></li>
                    <li><a href="#" class="list-link">Finished</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <!-- simple menu -->
            <li class="list-item">
              <!-- list title -->
              <p class="list-title text-uppercase">Notice</p>
              <!-- list items -->
              <ul class="list-unstyled">
                <li>
                  <a href="#" class="list-link">
                    <div class="clearfix">
                      <div class="float-left"><span class="list-icon"><i class="far fa-bell"></i></span>Messages</div>
                      <div class="float-right">
                        <span class="badge badge-dark">New</span>
                        <span class="badge badge-secondary">4</span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
            <!-- simple menu -->
            <li class="list-item">
              <!-- list title -->
              <p class="list-title text-uppercase">Blog</p>
              <!-- list items -->
              <ul class="list-unstyled">
                <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-plus"></i></span>Add post</a></li>
                <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-table"></i></span>Category</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <div class="container-fluid">
    <!-- content -->
    <main role="main">
      <!-- full box -->
      <div class="content-box mb-3 bg-white shadow-sm">
        <h3>Full conent</h3>
        <p class="content-font-size">Here is content this website page.</p>
      </div>
      <!-- grid -->
      <div class="row">
        <!-- six box -->
        <div class="mb-3 col-xl-6">
          <div class="content-box bg-white shadow-sm">
            <h3>50% content</h3>
            <p class="content-font-size">Here is content this website page.</p>
          </div>
        </div>
        <!-- six box -->
        <div class="mb-3 col-xl-6">
          <div class="content-box bg-white shadow-sm">
            <h3>50% content</h3>
            <p class="content-font-size">Here is content this website page.</p>
          </div>
        </div>
      </div>
    </main>
    <!-- license rights, do not delete this piece of code -->
    <footer class="text-right mt-3 mr-3 mb-3">
      <p class="text-silver">Code licensed
        <a href="https://github.com/compostrap/dashboard-skeleton/blob/master/license.md" class="text-muted" target="_blank" rel="license noopener">MIT</a>
      </p>
    </footer>
  </div>
</div>

Changelog:

v2.0.8 (2023-08-15)

  • Bugfix

v2.0.7 (2023-02-08)

  • Bugfix

v2.0.0 (2021-05-12)

  • Added Bootstrap 5 support.

2021-05-12

  • Bugfix

This awesome jQuery plugin is developed by compostrap. For more Advanced Usages, please check the demo page or visit the official website.