The Neptune UI Framework is a premium Web Application Admin Dashboard built on top of Bootstrap 5 Framework. It was created to be the most functional, clean and well designed theme for any types of backend applications. We have carefully designed all common elements.
We love when all updates are free. Once you’ve purchased Neptune, you’ll be able to download all future updates. If you like our theme don’t forget to rate us five stars. Good rating provides more and better updates in future!
theme/
├─ assets/
│ ├─ css/
│ ├─ images/
│ ├─ js/
│ │ └─ pages/
│ └─ plugins/
└─ templates/
├─ admin1/
└─ admin2/HEAD
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive Admin Dashboard Template">
<meta name="keywords" content="admin,dashboard">
<meta name="author" content="stacks">
<!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Title -->
<title>Neptune - Responsive Admin Dashboard Template</title>
<!-- Styles -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../assets/plugins/perfectscroll/perfect-scrollbar.css" rel="stylesheet">
<link href="../../assets/plugins/pace/pace.css" rel="stylesheet">
<!-- Theme Styles -->
<link href="../../assets/css/main.min.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/images/neptune.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/neptune.png" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>BODY
<body>
<div class="app align-content-stretch d-flex flex-wrap">
<div class="app-sidebar">
<div class="logo">
<a href="index.html" class="logo-icon"><span class="logo-text">Neptune</span></a>
<div class="sidebar-user-switcher user-activity-online">
<a href="#">
<img src="../../assets/images/avatars/avatar1.jpeg">
<span class="activity-indicator"></span>
<span class="user-info-text">Chloe<br><span class="user-state-info">On a call</span></span>
</a>
</div>
</div>
<div class="app-menu">
<ul class="accordion-menu">
<li class="sidebar-title">
Apps
</li>
<li>
<a href="index.html"><i class="material-icons-two-tone">dashboard</i>Dashboard</a>
</li>
<li>
<a href="mailbox.html"><i class="material-icons-two-tone">inbox</i>Mailbox<span class="badge rounded-pill badge-danger float-end">87</span></a>
</li>
<li>
<a href="file-manager.html"><i class="material-icons-two-tone">cloud_queue</i>File Manager</a>
</li>
<li>
<a href="calendar.html"><i class="material-icons-two-tone">calendar_today</i>Calendar<span class="badge rounded-pill badge-success float-end">14</span></a>
</li>
<li>
<a href="todo.html"><i class="material-icons-two-tone">done</i>Todo</a>
</li>
<li>
<a href=""><i class="material-icons-two-tone">star</i>Pages<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="pricing.html">Pricing</a>
</li>
<li>
<a href="invoice.html">Invoice</a>
</li>
<li>
<a href="settings.html">Settings</a>
</li>
<li>
<a href="#">Authentication<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="sign-in.html">Sign In</a>
</li>
<li>
<a href="sign-up.html">Sign Up</a>
</li>
<li>
<a href="lock-screen.html">Lock Screen</a>
</li>
</ul>
</li>
<li>
<a href="error.html">Error</a>
</li>
</ul>
</li>
<li class="sidebar-title">
UI Elements
</li>
<li>
<a href="#"><i class="material-icons-two-tone">color_lens</i>Styles<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="styles-typography.html">Typography</a>
</li>
<li>
<a href="styles-code.html">Code</a>
</li>
<li>
<a href="styles-icons.html">Icons</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="material-icons-two-tone">grid_on</i>Tables<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="tables-basic.html">Basic</a>
</li>
<li>
<a href="tables-datatable.html">DataTable</a>
</li>
</ul>
</li>
<li>
<a href=""><i class="material-icons-two-tone">sentiment_satisfied_alt</i>Elements<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-avatars.html">Avatars</a>
</li>
<li>
<a href="ui-badge.html">Badge</a>
</li>
<li>
<a href="ui-breadcrumbs.html">Breadcrumbs</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-button-groups.html">Button Groups</a>
</li>
<li>
<a href="ui-collapse.html">Collapse</a>
</li>
<li>
<a href="ui-dropdown.html">Dropdown</a>
</li>
<li>
<a href="ui-images.html">Images</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-spinners.html">Spinners</a>
</li>
<li>
<a href="ui-toast.html">Toast</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="material-icons-two-tone">card_giftcard</i>Components<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="components-accordions.html">Accordions</a>
</li>
<li>
<a href="components-block-ui.html">Block UI</a>
</li>
<li>
<a href="components-cards.html">Cards</a>
</li>
<li>
<a href="components-carousel.html">Carousel</a>
</li>
<li>
<a href="components-countdown.html">Countdown</a>
</li>
<li>
<a href="components-lightbox.html">Lightbox</a>
</li>
<li>
<a href="components-lists.html">Lists</a>
</li>
<li>
<a href="components-modals.html">Modals</a>
</li>
<li>
<a href="components-tabs.html">Tabs</a>
</li>
<li>
<a href="components-session-timeout.html">Session Timeout</a>
</li>
</ul>
</li>
<li>
<a href="widgets.html"><i class="material-icons-two-tone">widgets</i>Widgets</a>
</li>
<li>
<a href="#"><i class="material-icons-two-tone">edit</i>Forms<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="forms-basic.html">Basic</a>
</li>
<li>
<a href="forms-input-groups.html">Input Groups</a>
</li>
<li>
<a href="forms-input-masks.html">Input Masks</a>
</li>
<li>
<a href="forms-layouts.html">Form Layouts</a>
</li>
<li>
<a href="forms-validation.html">Form Validation</a>
</li>
<li>
<a href="forms-file-upload.html">File Upload</a>
</li>
<li>
<a href="forms-text-editor.html">Text Editor</a>
</li>
<li>
<a href="forms-datepickers.html">Datepickers</a>
</li>
<li>
<a href="forms-select2.html">Select2</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="material-icons-two-tone">analytics</i>Charts<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="charts-apex.html">Apex</a>
</li>
<li>
<a href="charts-chartjs.html">ChartJS</a>
</li>
</ul>
</li>
<li class="sidebar-title">
Layout
</li>
<li>
<a href="#"><i class="material-icons-two-tone">view_agenda</i>Content<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="content-page-headings.html">Page Headings</a>
</li>
<li>
<a href="content-section-headings.html">Section Headings</a>
</li>
<li>
<a href="content-left-menu.html">Left Menu</a>
</li>
<li>
<a href="content-right-menu.html">Right Menu</a>
</li>
<li>
<a href="content-boxed-content.html">Boxed Content</a>
</li>
</ul>
</li>
<li class="active-page">
<a href="#"><i class="material-icons-two-tone">menu</i>Menu<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="menu-off-canvas.html">Off-Canvas</a>
</li>
<li>
<a href="menu-standard.html" class="active">Standard</a>
</li>
<li>
<a href="menu-dark-sidebar.html">Dark Sidebar</a>
</li>
<li>
<a href="menu-hover-menu.html">Hover Menu</a>
</li>
<li>
<a href="menu-colored-sidebar.html">Colored Sidebar</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="material-icons-two-tone">view_day</i>Header<i class="material-icons has-sub-menu">keyboard_arrow_right</i></a>
<ul class="sub-menu">
<li>
<a href="header-basic.html">Basic</a>
</li>
<li>
<a href="header-full-width.html">Full-width</a>
</li>
<li>
<a href="header-transparent.html">Transparent</a>
</li>
<li>
<a href="header-large.html">Large</a>
</li>
<li>
<a href="header-colorful.html">Colorful</a>
</li>
</ul>
</li>
<li class="sidebar-title">
Other
</li>
<li>
<a href="#"><i class="material-icons-two-tone">bookmark</i>Documentation</a>
</li>
<li>
<a href="#"><i class="material-icons-two-tone">access_time</i>Change Log</a>
</li>
</ul>
</div>
</div>
<div class="app-container">
<div class="search">
<form>
<input class="form-control" type="text" placeholder="Type here..." aria-label="Search">
</form>
<a href="#" class="toggle-search"><i class="material-icons">close</i></a>
</div>
<div class="app-header">
<nav class="navbar navbar-light navbar-expand-lg">
<div class="container-fluid">
<div class="navbar-nav" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hide-sidebar-toggle-button" href="#"><i class="material-icons">first_page</i></a>
</li>
<li class="nav-item dropdown hidden-on-mobile">
<a class="nav-link dropdown-toggle" href="#" id="addDropdownLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="material-icons">add</i>
</a>
<ul class="dropdown-menu" aria-labelledby="addDropdownLink">
<li><a class="dropdown-item" href="#">New Workspace</a></li>
<li><a class="dropdown-item" href="#">New Board</a></li>
<li><a class="dropdown-item" href="#">Create Project</a></li>
</ul>
</li>
<li class="nav-item dropdown hidden-on-mobile">
<a class="nav-link dropdown-toggle" href="#" id="exploreDropdownLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="material-icons-outlined">explore</i>
</a>
<ul class="dropdown-menu dropdown-lg large-items-menu" aria-labelledby="exploreDropdownLink">
<li>
<h6 class="dropdown-header">Repositories</h6>
</li>
<li>
<a class="dropdown-item" href="#">
<h5 class="dropdown-item-title">
Neptune iOS
<span class="badge badge-warning">1.0.2</span>
<span class="hidden-helper-text">switch<i class="material-icons">keyboard_arrow_right</i></span>
</h5>
<span class="dropdown-item-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<h5 class="dropdown-item-title">
Neptune Android
<span class="badge badge-info">dev</span>
<span class="hidden-helper-text">switch<i class="material-icons">keyboard_arrow_right</i></span>
</h5>
<span class="dropdown-item-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</a>
</li>
<li class="dropdown-btn-item d-grid">
<button class="btn btn-primary">Create new repository</button>
</li>
</ul>
</li>
</ul>
</div>
<div class="d-flex">
<ul class="navbar-nav">
<li class="nav-item hidden-on-mobile">
<a class="nav-link active" href="#">Applications</a>
</li>
<li class="nav-item hidden-on-mobile">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item hidden-on-mobile">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link toggle-search" href="#"><i class="material-icons">search</i></a>
</li>
<li class="nav-item hidden-on-mobile">
<a class="nav-link language-dropdown-toggle" href="#" id="languageDropDown" data-bs-toggle="dropdown"><img src="../../assets/images/flags/us.png" alt=""></a>
<ul class="dropdown-menu dropdown-menu-end language-dropdown" aria-labelledby="languageDropDown">
<li><a class="dropdown-item" href="#"><img src="../../assets/images/flags/germany.png" alt="">German</a></li>
<li><a class="dropdown-item" href="#"><img src="../../assets/images/flags/italy.png" alt="">Italian</a></li>
<li><a class="dropdown-item" href="#"><img src="../../assets/images/flags/china.png" alt="">Chinese</a></li>
</ul>
</li>
<li class="nav-item hidden-on-mobile">
<a class="nav-link nav-notifications-toggle" id="notificationsDropDown" href="#" data-bs-toggle="dropdown">4</a>
<div class="dropdown-menu dropdown-menu-end notifications-dropdown" aria-labelledby="notificationsDropDown">
<h6 class="dropdown-header">Notifications</h6>
<div class="notifications-dropdown-list">
<a href="#">
<div class="notifications-dropdown-item">
<div class="notifications-dropdown-item-image">
<span class="notifications-badge bg-info text-white">
<i class="material-icons-outlined">campaign</i>
</span>
</div>
<div class="notifications-dropdown-item-text">
<p class="bold-notifications-text">Donec tempus nisi sed erat vestibulum, eu suscipit ex laoreet</p>
<small>19:00</small>
</div>
</div>
</a>
<a href="#">
<div class="notifications-dropdown-item">
<div class="notifications-dropdown-item-image">
<span class="notifications-badge bg-danger text-white">
<i class="material-icons-outlined">bolt</i>
</span>
</div>
<div class="notifications-dropdown-item-text">
<p class="bold-notifications-text">Quisque ligula dui, tincidunt nec pharetra eu, fringilla quis mauris</p>
<small>18:00</small>
</div>
</div>
</a>
<a href="#">
<div class="notifications-dropdown-item">
<div class="notifications-dropdown-item-image">
<span class="notifications-badge bg-success text-white">
<i class="material-icons-outlined">alternate_email</i>
</span>
</div>
<div class="notifications-dropdown-item-text">
<p>Nulla id libero mattis justo euismod congue in et metus</p>
<small>yesterday</small>
</div>
</div>
</a>
<a href="#">
<div class="notifications-dropdown-item">
<div class="notifications-dropdown-item-image">
<span class="notifications-badge">
<img src="../../assets/images/avatars/avatar1.jpeg" alt="">
</span>
</div>
<div class="notifications-dropdown-item-text">
<p>Praesent sodales lobortis velit ac pellentesque</p>
<small>yesterday</small>
</div>
</div>
</a>
<a href="#">
<div class="notifications-dropdown-item">
<div class="notifications-dropdown-item-image">
<span class="notifications-badge">
<img src="../../assets/images/avatars/avatar7.jpeg" alt="">
</span>
</div>
<div class="notifications-dropdown-item-text">
<p>Praesent lacinia ante eget tristique mattis. Nam sollicitudin velit sit amet auctor porta</p>
<small>yesterday</small>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="app-content">
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="page-description">
<h1>Standard Menu</h1>
<span>This page is just an example of basic menu configuration.</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascripts -->
<script src="../../assets/plugins/jquery/jquery-3.5.1.min.js"></script>
<script src="../../assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="../../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../assets/plugins/perfectscroll/perfect-scrollbar.min.js"></script>
<script src="../../assets/plugins/pace/pace.min.js"></script>
<script src="../../assets/plugins/highlight/highlight.pack.js"></script>
<script src="../../assets/js/main.min.js"></script>
</body>All theme CSS files are located in source/assets/css folder. For your CSS customization you can use source/assets/css/custom.css. Keep your custom CSS separate it makes more easier when updating the theme in future.
All Javascript files are located in source/assets/js/ folder. Also Page-level Javascript files are located in source/assets/js/pages/ folder and each page has its own Javascript file. For your Javascripts you can use source/assets/js/custom.js. Keep your custom Javascript separate it will make easier easier to update the theme in future.
Neptune uses Poppins font as primary font for texts and Montserrat font for some components. It must be loaded in HTML Head before other CSS files.
Font code example:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">Neptune also uses Material icons.
All available helper classes in Neptune:
| Prefix | Second Prefix (side) | third Prefix | Suffix (value) | |
|---|---|---|---|---|
| Margin | m | t,r,b,l | n (only for negative values) | xxs, xs, sm, md, lg, xxl |
| Padding | p | v,h (top & bottom, left & right) | xxs, xs, sm, md, lg, xxl |
.no-s Removes margins & paddings
.no-m Removes margins
.no-p Removes paddings
.no-p-h Removes paddings from left & right
.no-p-v Removes Paddings from top & bottom
.no-b Removes borders
.b Adds border from all sides
.b-t, .b-r, .b-b, .b-l Adds border from top, right, bottom, left
.b-default, .b-primary, .b-success, .b-info, .b-warning, .b-danger Adds border by contextual colors.
.b-2, .b-3, .b-4 Border size
.b-n-t, .b-n-r, .b-n-b, .b-n-l Removes border from top, right, bottom, left
.no-r Removes border radius
.r Adds border radius
.r-t-l, .r-t-r, .r-b-l, .r-b-r Adds border radius From top-left, top-right, bottom-left, bottom-right sides.
.no-r-t-l, .no-r-t-r, .no-r-b-l, .no-r-b-r Removes border radius From top-left, top-right, bottom-left, bottom-right sides.
Neptune comes with multiple unique themes.
HTML files for all layouts are located under Layout section in the sidebar of the demo files.
In order to use different layouts, you can use html files from the demo files for your page setup.
If you prefer to use dark theme, include assets/css/darktheme.css file on your page.
It's very easy to create a new page with Neptune.
You can use all components that are shown in the live preview. Note, all content should be placed in .content-wrapper to fit the page correctly.
If you will use component that needs some JS codes which are included in component demo page at the end of the HTML body tag, you can just include the same JS file. If you will use component that needs an extra plugin to work, you have to include files of this plugins as they are included in the preview page.
| Plugin | Official Website |
|---|---|
| Apex Charts | https://apexcharts.com/ |
| Bootstrap | http://getbootstrap.com/ |
| BlockUI | http://malsup.com/jquery/block/ |
| Chartjs | http://www.chartjs.org/ |
| DataTables | https://datatables.net/ |
| FullCalendar | https://fullcalendar.io/docs |
| Idle Timer | https://github.com/thorst/jquery-idletimer/ |
| Jquery | https://jquery.com/ |
| ApexCharts | https://apexcharts.com/ |
| ChartJS | https://www.chartjs.org/ |
| PerfectScroll | https://github.com/mdbootstrap/perfect-scrollbar |
| Select2 | https://select2.org/ |
Once again, thank you so much for purchasing this theme. As I said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.