A well design, responsive and attractive CSS and JavaScript based dashboard for web apps & admin penal. The dashboard comes with Menu, Search, Charts & Graphs, Widgets, Notifications, Alerts and Profile info.
Plugin Preview
How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins
Plugin Overview
Plugin: | Web-App-Dashboard |
Author: | Triantafyllos Famprikatzis |
Licence: | MIT Licence |
Published: | March 1, 2024 |
Repository: | Fork on GitHub |
Dependencies: | Chart.js 2.7.3 or Latest |
File Type: | zip archive (HTML, CSS & JavaScript) |
Package Size: | 251 KB |
How to Make Responsive Dashboard:
1. To getting started with this dashboard, include the all necessary files into HTML document.
<!-- Main CSS for Dashboard --> <link rel="stylesheet" href="css/styles.css"> <!-- Chart Js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> <!-- Main JavaScript for Dashboard --> <script src="script.js"></script>
2. Create header
element and add your customization details into it.
<header> <img class="logo" src="icons/logo.png" alt="logo"> <div class="header-nav"> <div class="notification"> <img class="bell" id="js-bell" src="icons/icon-bell.svg" alt="bell"> <p class="badge" id="badge-1"><strong class="badge-num">1</strong></p> <p class="badge" id="badge-2"><strong class="badge-num">2</strong></p> <p class="badge" id="badge-3"><strong class="badge-num">3</strong></p> <p class="badge" id="badge-4"><strong class="badge-num">4</strong></p> <ul class="notification-menu" id="notif-menu" style="display: none;"> <li id="header-li"><strong>Notifications</strong></li> <li class="popuptext" id="li-1"> <img class="img" src="images/member-1.jpg" alt="member image"> <h3 class="name">Victoria Chambers</h3> <p class="comment">What are your plans for tonight?</p> <button class="btn-notif" type="button" name="delete">X</button> </li> <li class="popuptext" id="li-2"> <img class="img" src="images/member-2.jpg" alt="member image"> <h3 class="name">Dale Byrd</h3> <p class="comment">Hey what's up?</p> <button class="btn-notif" type="button" name="delete">X</button> </li> <li class="popuptext" id="li-3"> <img class="img" src="images/member-3.jpg" alt="member image"> <h3 class="name">Dawn Wood</h3> <p class="comment">Just sent you a voice message</p> <button class="btn-notif" type="button" name="delete">X</button> </li> <li class="popuptext" id="li-4"> <img class="img" src="images/member-4.jpg" alt="member image"> <h3 class="name">Dan Oliver</h3> <p class="comment">Are you going to the game next week?</p> <button class="btn-notif" type="button" name="delete">X</button> </li> <li class="popuptext popupalert" id="alert-bell" style="display: none;"> <h3>No new notifications</h3> </li> </ul> </div> <span class="border-notif"></span> <img class="profile-pic" src="images/josh.jpg" alt="User Avatar"> <h3 class="profile-name">Josh Sullivan</h3> </div> </header>
3. After this, create Navigation menu like below.
<nav> <div class="side-nav" id="js-nav"> <a href="#top" class="nav-icons nav-selected" id="btn-top"><img src="icons/icon-dashboard.svg" alt="dashboard"></a> <a href="#traffic" class="nav-icons" id="btn-traffic"><img src="icons/icon-visits.svg" alt="visits"></a> <a href="#activity" class="nav-icons" id="btn-activity"><img src="icons/icon-members.svg" alt="members"></a> <a href="#settings" class="nav-icons" id="btn-settings"><img src="icons/icon-settings.svg" alt="settings"></a> </div> </nav>
4. Copy the other parts of this dashboard from downloaded index file. Thanks 🙂
Similar Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.