SRTdash Admin Dashboard

SRTdash is a modern, fully responsive admin dashboard template built with Bootstrap 5.3.8 and vanilla JavaScript. It ships with 56 HTML pages covering dashboards, UI components, charts, forms, tables, authentication, and more.

No build step required SRTdash is a static HTML template. Open any page directly in your browser or use a simple local server. No Node.js, no bundler, no compilation needed.

What's Included

3 Dashboard Variants ICO, Ecommerce, and SEO dashboards with unique layouts and chart configurations

56 HTML Pages Every common admin panel screen — from login to invoices to data tables

Bootstrap 5.3.8 Latest stable Bootstrap with all components, utilities, and responsive grid

100% Vanilla JS Zero jQuery dependency. Clean, modular JavaScript with guard clauses

Chart.js 4 Charts Beautiful gradient area charts, doughnut charts, bar charts, and sparklines

AVIF Image Support All images use <picture> elements with AVIF sources and JPG/PNG fallback

Font Awesome 7 Latest Free icons plus Themify Icons for maximum icon variety

Accessible & SEO-ready Skip links, ARIA labels, semantic HTML, unique meta tags per page, GA4 ready

Version History

Version	Date	Changes
v2.0	2026	Complete rewrite: Bootstrap 5.3.8, vanilla JS, AVIF images, Font Awesome 7, accessibility, SEO, Chart.js 4 consolidation
v1.0	2018	Original release with Bootstrap 4 and jQuery

Getting Started

SRTdash requires no build tools, package managers, or server-side setup. Simply open the files.

Quick Start

Unzip the template archive
Navigate to the srtdash/ folder
Open index.html in your browser

Local Development Server

For the best experience (especially for AVIF image loading), use a local HTTP server:

Using Python

cd srtdash
python3 -m http.server 8000
# Visit http://localhost:8000

Using Node.js

npx http-server srtdash
# Visit http://localhost:8080

Using VS Code

Install the Live Server extension, then right-click any HTML file and select "Open with Live Server."

Why a local server? Some browsers restrict <picture> element AVIF source switching when opening files via file:// protocol. A local HTTP server ensures all features work correctly.

Browser Support

SRTdash supports all modern evergreen browsers:

Browser	Version
Chrome / Edge	90+
Firefox	90+
Safari	15+
Opera	76+

File Structure

The template is organized in a single srtdash/ directory with all assets nested under assets/.

srtdash/ ├── assets/ │ ├── css/ │ │ ├── bootstrap.min.css ← Bootstrap 5.3.8 │ │ ├── fontawesome.min.css ← Font Awesome 7.1.0 Free │ │ ├── metismenujs.min.css ← Sidebar menu plugin │ │ ├── swiper-bundle.min.css ← Carousel plugin │ │ ├── themify-icons.css ← Themify icon font │ │ ├── typography.css ← Font imports & base typography │ │ ├── default-css.css ← Reset & CSS variables │ │ ├── styles.css ← Main template styles │ │ └── responsive.css ← Media query breakpoints │ ├── js/ │ │ ├── bootstrap.bundle.min.js ← Bootstrap 5 + Popper │ │ ├── metismenujs.min.js ← Collapsible sidebar menu │ │ ├── swiper-bundle.min.js ← Touch slider/carousel │ │ ├── scripts.js ← Main app logic (vanilla JS) │ │ ├── bar-chart.js ← Bar chart configurations │ │ ├── line-chart.js ← Line chart configurations │ │ ├── pie-chart.js ← Pie/doughnut chart configurations │ │ └── maps.js ← Google Maps integration │ ├── fonts/ ← Themify icon font files │ ├── webfonts/ ← Font Awesome WOFF2 files │ └── images/ │ ├── author/ ← Avatar & author photos │ ├── bg/ ← Background images │ ├── blog/ ← Blog post thumbnails │ ├── card/ ← Card images │ ├── icon/ ← Logos & icon assets │ ├── media/ ← Media object images │ └── team/ ← Team member photos ├── index.html ← ICO Dashboard ├── index2.html ← Ecommerce Dashboard ├── index3.html ← SEO Dashboard ├── index3-horizontalmenu.html ← Horizontal nav variant ├── starter.html ← Blank starter template └── ... (51 more HTML pages)

Key Files

File	Purpose
`starter.html`	Blank page skeleton — copy this when creating new pages
`assets/css/styles.css`	Main customization file — all component-level styles
`assets/css/responsive.css`	All media query breakpoints
`assets/css/default-css.css`	CSS custom properties (variables), resets, utility classes
`assets/js/scripts.js`	Core app logic — sidebar, sticky header, preloader, etc.

Page Layout

Every page follows a consistent layout skeleton. Understanding this structure is key to customizing the template.

Visual Layout

HEADER .header-area — search, notifications, profile

CONTENT
.main-content-inner#main-content

Your page content goes here

HTML Skeleton

<!-- Skip link (accessibility) -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Preloader -->
<div id="preloader"><div class="loader"></div></div>

<!-- Page container -->
<div class="page-container">

    <!-- Sidebar -->
    <div class="sidebar-menu">
        <div class="sidebar-header">...logo...</div>
        <div class="main-menu">
            <nav>
                <ul class="metismenu" id="menu">
                    <!-- Navigation items -->
                </ul>
            </nav>
        </div>
    </div>

    <!-- Main content -->
    <div class="main-content">
        <div class="header-area">...header...</div>
        <div class="page-title-area">...breadcrumbs...</div>

        <div class="main-content-inner" id="main-content">
            <!-- YOUR CONTENT HERE -->
        </div>
    </div>

    <footer>...</footer>
</div>

<!-- Right-side settings panel -->
<div class="offset-area">...</div>

Sidebar Navigation

The sidebar uses MetisMenuJS for collapsible submenus. The active page is highlighted with the class="active" on both the parent <li> and the submenu <li>.

<li class="active">
    <a href="javascript:void(0)" aria-expanded="true">
        <i class="ti-dashboard"></i><span>dashboard</span>
    </a>
    <ul class="collapse">
        <li class="active"><a href="index.html">ICO dashboard</a></li>
        <li><a href="index2.html">Ecommerce dashboard</a></li>
        <li><a href="index3.html">SEO dashboard</a></li>
    </ul>
</li>

Header Area

The header contains: navigation toggle button, search box, notification dropdowns (bell + envelope), fullscreen toggle, and settings panel trigger. It becomes sticky on scroll via #sticky-header.

Data Attributes

All interactive components use Bootstrap 5 data attributes:

Attribute	Used For
`data-bs-toggle="dropdown"`	Header notification & profile dropdowns
`data-bs-toggle="tab"`	Tab navigation, trading history, settings panel
`data-bs-toggle="modal"`	Modal dialogs
`data-bs-toggle="popover"`	Popover tooltips
`data-bs-dismiss="modal"`	Close buttons inside modals
`data-bs-dismiss="alert"`	Dismissible alert close buttons

CSS Architecture

SRTdash uses a layered CSS approach with no preprocessor. All styles are plain CSS files loaded in a specific order.

Load Order

CSS files are loaded in the <head> in this exact order:

#	File	Purpose
1	`Google Fonts`	Lato and Poppins font families via Google Fonts API
2	`bootstrap.min.css`	Bootstrap 5.3.8 framework
3	`fontawesome.min.css`	Font Awesome 7.1.0 Free (with v4 shim compatibility)
4	`themify-icons.css`	Themify icon font
5	`metismenujs.min.css`	MetisMenu sidebar plugin styles
6	`swiper-bundle.min.css`	Swiper carousel styles
7	`typography.css`	Font imports and base typography rules
8	`default-css.css`	CSS custom properties, resets, utility classes
9	`styles.css`	All component-level template styles
10	`responsive.css`	Responsive breakpoints and overrides

CSS Custom Properties

The template uses CSS variables defined in default-css.css for consistent theming:

:root {
    --primary-color: #4336FB;
    --text-dark: #333;
    --text-medium: #616161;
    --text-light: #999;
}

To change the primary brand color across the entire template, update --primary-color in default-css.css.

Typography

Two font families are used throughout:

Poppins — headings, dashboard labels, chart text
Lato — body text, table content, sidebar

Icon Systems

SRTdash includes two icon libraries:

Library	Usage	Syntax
Font Awesome 7 Free	Primary — sidebar icons, dashboard icons, action buttons	`<i class="fa-solid fa-house">`
Themify Icons	Secondary — sidebar items, settings panel	`<i class="ti-dashboard">`

Browse available icons on the fontawesome.html and themify.html showcase pages.

Responsive Breakpoints

Defined in responsive.css, the template adapts at these widths:

Breakpoint	Behavior
`≤1364px`	Sidebar auto-collapses
`≤1199px`	XL grid adjustments
`≤991px`	Tablet layout, stacked columns
`≤767px`	Mobile layout, full-width columns
`≤575px`	Extra-small adjustments

JavaScript

All JavaScript is vanilla (no jQuery). The main application logic lives in scripts.js, wrapped in an IIFE for scope isolation.

Script Load Order

Scripts are loaded before the closing </body> tag in this order:

#	Script	Source
1	`bootstrap.bundle.min.js`	Vendor (includes Popper.js)
2	`metismenujs.min.js`	Vendor
3	`swiper-bundle.min.js`	Vendor
4	Chart libraries (page-specific)	CDN
5	Chart initialization files	Local
6	`scripts.js`	Local — core app logic
7	Google Analytics 4	CDN

Core Features (scripts.js)

The main script file is organized as individual initialization functions:

Function	What It Does
`initPreloader()`	Fades out the loading screen 300ms after `window.load`
`initSidebar()`	Toggles `.sbar_collapsed` on sidebar via nav button click or at ≤1364px viewport
`initSidebarMenu()`	Initializes `new MetisMenu('#menu')` for collapsible nav
`initStickyHeader()`	Adds `.sticky-menu` class to `#sticky-header` when scrolled past 1px
`initTestimonialCarousel()`	Swiper carousel with responsive breakpoints, auto-wraps slides in `.swiper-wrapper`
`initSettingsPanel()`	Toggles `.show_hide` on `.offset-area` when clicking `.settings-btn`
`initFullscreen()`	Toggles browser fullscreen via `#full-view` / `#full-view-exit` buttons
`initFormValidation()`	Bootstrap 5 native form validation on `.needs-validation` forms
`initFormFocus()`	Floating label focus effect on `.form-gp` inputs

Chart Files

Each chart file initializes hardcoded demo data and uses guard clauses (if (!document.getElementById(...))) to safely skip initialization when the canvas element isn't on the current page.

line-chart.js

Powers charts on the ICO dashboard (index.html), line chart showcase, and other pages:

Sales mini-charts — Smooth gradient area charts (blue, amber, emerald)
Overview chart — Dual-dataset line chart with gradient fills (Revenue vs Expenses)
Market sparklines — Tiny inline charts in the market value table (4 colors)
Visitor graph — Highcharts areaspline (on other dashboard pages)

pie-chart.js

Coin Distribution — Chart.js doughnut with center text plugin (index.html)
ZingChart / Highcharts / AmCharts — Additional charts on piechart.html showcase

bar-chart.js

Chart.js bar charts — Stacked, grouped bar configurations
AmCharts / Highcharts bars — Additional charts on barchart.html showcase

Safe CDN loading Chart files use typeof library !== 'undefined' guard clauses. If a CDN script isn't loaded on a page, the chart simply won't initialize — no errors.

Color Palette (Charts)

The ICO dashboard charts use a unified, harmonious color palette:

Color	Hex	Usage
Blue	`#3b82f6`	Bitcoin, primary series, Ethereum icon
Indigo	`#6366f1`	Secondary series, Dashcoin, coin distribution
Amber	`#f59e0b`	Bitcoin Dash, expenses, accent
Emerald	`#10b981`	Ethereum chart, success indicators

Pages & Components

SRTdash includes 56 ready-to-use HTML pages organized into these categories:

Dashboards

index.htmlICO Dashboard — crypto sales, market trends, charts

index2.htmlEcommerce Dashboard — sales, orders, revenue

index3.htmlSEO Dashboard — traffic, keywords, analytics

index3-horizontalmenu.htmlHorizontal navigation variant

Charts

barchart.htmlBar chart showcase (Chart.js, AmCharts, Highcharts)

linechart.htmlLine chart showcase (Chart.js, Highcharts, ZingChart)

piechart.htmlPie/doughnut chart showcase (Chart.js, ZingChart, Highcharts)

UI Components

accordion.htmlCollapsible accordion panels

alert.htmlBootstrap alert variants

badge.htmlBadge styles and sizes

button.htmlButton styles and variants

button-group.htmlButton groups and toolbars

cards.htmlCard layouts and styles

dropdown.htmlDropdown menus

list-group.htmlList group variants

media-object.htmlMedia objects with alignment options

modal.htmlModal dialogs

pagination.htmlPagination styles

popovers.htmlPopovers and tooltips

progressbar.htmlProgress bar variants

tab.htmlTab navigation panels

typography.htmlHeading, text, and list styles

grid.htmlBootstrap grid system demo

Forms & Tables

form.htmlForm elements and validation

table-basic.htmlBasic table styles

table-layout.htmlTable layout variants

datatable.htmlInteractive data table with sorting, search, pagination

Icons

fontawesome.htmlFont Awesome 7 icon showcase

themify.htmlThemify icon showcase

Apps

profile.htmlUser profile page

notifications.htmlNotification center

settings.htmlAccount settings

invoice.htmlInvoice summary

pricing.htmlPricing table

maps.htmlGoogle Maps integration

Authentication

login.html / login2.html / login3.htmlThree login page variants

register.html — register4.htmlFour registration page variants

reset-pass.html / forgot-password.htmlPassword recovery flows

screenlock.html / screenlock2.htmlLock screen variants

Error Pages

401.htmlUnauthorized

403.htmlForbidden

404.htmlNot Found

500.htmlInternal Server Error

Tech Stack

Every library and tool used in the template, with version numbers and sources.

Core Libraries

Library	Version	Source	Purpose
Bootstrap	5.3.8	Vendor	CSS framework, grid, components, utilities
MetisMenuJS	1.4.0	Vendor	Collapsible sidebar navigation
Swiper	12.1.0	Vendor	Touch slider / carousel

Chart Libraries

Library	Version	Source	Used On
Chart.js	4.5.1	CDN	All dashboards, chart showcase pages
Highcharts	12.5.0	CDN	Chart showcase pages (linechart, barchart, piechart)
ZingChart	2.9.16	CDN	Chart showcase pages

Icon Libraries

Library	Version	Source
Font Awesome	7.1.0 Free	Vendor (with v4 shim compatibility)
Themify Icons	—	Vendor

Other

Library	Version	Source	Used On
Simple-DataTables	10.x	CDN	datatable.html
Google Fonts	—	CDN	Lato + Poppins (all pages)
Google Analytics 4	—	CDN	All pages (replace `G-XXXXXXXXXX` with your ID)

Customization

Creating a New Page

The fastest way to add a new page:

Copy starter.html — it contains the full layout skeleton with empty content area
Update the <title> and <meta name="description"> tags
Add your content inside .main-content-inner#main-content
Update the sidebar navigation to include a link to your new page
Set class="active" on the relevant sidebar <li> elements

Remember sidebar links Every page has its own copy of the sidebar HTML. When adding a new page to the navigation, update the sidebar markup in every HTML file where it should appear.

Changing the Brand Color

The template's primary color is controlled by a single CSS variable in default-css.css:

/* In assets/css/default-css.css */
:root {
    --primary-color: #4336FB;  /* Change this to your brand color */
}

This variable is used for active states, sidebar accents, buttons, and decorative elements throughout the template.

Changing Fonts

Fonts are loaded via Google Fonts in the <head> of every page:

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

To change fonts, update the Google Fonts URL and the corresponding font-family declarations in typography.css.

Adding Chart Libraries

Chart CDN scripts are loaded only on pages that need them. To add charts to a new page:

<!-- Add before scripts.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script src="assets/js/line-chart.js"></script>
<script src="assets/js/pie-chart.js"></script>

Guard clauses in each chart file prevent errors when canvas elements don't exist on the page.

Google Analytics

Every page includes a GA4 tracking snippet at the bottom. Replace the placeholder ID with your actual tracking ID:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag("js", new Date());
    gtag("config", "G-YOUR-ID");
</script>

Sidebar Configuration

The sidebar supports multi-level collapsible menus via MetisMenuJS. To add a new menu group:

<li>
    <a href="javascript:void(0)" aria-expanded="true">
        <i class="ti-widget"></i><span>My Section</span>
    </a>
    <ul class="collapse">
        <li><a href="page1.html">Page One</a></li>
        <li><a href="page2.html">Page Two</a></li>
    </ul>
</li>

Accessibility

SRTdash includes several accessibility features built into every page.

Skip Link

Every page includes a visually hidden skip link as the first focusable element:

<a href="#main-content" class="skip-link">Skip to main content</a>

This link becomes visible on keyboard focus, allowing keyboard users to bypass the sidebar and header navigation.

Semantic HTML

Proper heading hierarchy (h1 → h2 → h3)
<nav> element wrapping sidebar navigation
<main>-equivalent content area with id="main-content"
<footer> element for page footer
lang="en" attribute on all <html> tags

ARIA Attributes

aria-expanded on collapsible sidebar menu items
role="tab" and role="tabpanel" on tab interfaces
aria-label on icon-only buttons

Keyboard Navigation

All interactive elements are focusable
Bootstrap dropdowns, modals, and tabs work with keyboard
Focus visible indicators on all interactive elements

Images

All <img> elements include descriptive alt attributes. Decorative images use alt="".

Image Optimization

SRTdash uses modern image formats with progressive enhancement for maximum performance.

AVIF with Fallback

Every image uses the <picture> element with an AVIF source and JPG/PNG fallback:

<picture>
    <source srcset="assets/images/path/file.avif" type="image/avif">
    <img src="assets/images/path/file.jpg" alt="Description">
</picture>

Browsers that support AVIF (Chrome, Firefox, Safari 16+) load the smaller AVIF file. Older browsers gracefully fall back to JPG/PNG.

AVIF savings AVIF files are typically 40-60% smaller than equivalent JPEGs at the same visual quality, resulting in significantly faster page loads.

Image Directories

Directory	Contents
`images/author/`	User avatars and author photos (5 authors + 1 avatar)
`images/bg/`	Full-screen background images (login/register pages)
`images/blog/`	Blog post thumbnail images
`images/card/`	Card component images (9 variants)
`images/icon/`	Logo and miscellaneous icon assets
`images/media/`	Media object example images
`images/team/`	Team member profile photos (5 members)

Adding New Images

When adding images, always provide both formats:

Place the original JPG/PNG in the appropriate directory
Create an AVIF version (using tools like Squoosh, libavif, or your image editor)
Use the <picture> element pattern shown above

Sources & Credits

Frameworks

Bootstrap 5.3.8 — CSS framework
Google Fonts — Lato and Poppins typefaces

JavaScript Libraries

Chart.js 4 — Beautiful, flexible charting
Highcharts 12 — Advanced interactive charts
ZingChart — Enterprise-grade charts
Swiper 12 — Modern touch slider
MetisMenuJS — Collapsible menu plugin
Simple-DataTables — Lightweight data tables

Icons

Font Awesome 7 Free — Icon library
Themify Icons — Icon font

Images

Sample photos from Unsplash and Pexels

Support

Thank you for using SRTdash! If you have questions, encounter issues, or need customization help, please don't hesitate to reach out.

Contact

Get in touch via the Colorlib Templates page.

Template by

Designed and developed by Colorlib — a leading HTML template provider trusted by millions of developers worldwide.

Found a bug? Please include the browser name and version, the page URL, and a description of the issue. Screenshots are always appreciated!