Simple and fast dashboard skeleton template combining a responsive sidebar and a multi-level menu.
npm install dashboard-skeleton-compostrapLoad the dashboard styles after the sidebar packages, so the dashboard layer can finish the composed layout:
import 'sidebar-skeleton-compostrap/sidebar.css';
import 'sidebar-menu-compostrap/sidebar-menu.css';
import 'sidebar-menu-2-compostrap/sidebar-custom.css';
import 'dashboard-skeleton-compostrap/dashboard.css';The dashboard requires initialization of its core components. Add the following to your main JavaScript file:
import { Sidebar } from 'sidebar-skeleton-compostrap';
import { SidebarMenuApp } from 'sidebar-menu-compostrap';
import { ThemeSwitcher } from 'theme-switcher-compostrap';
document.addEventListener('DOMContentLoaded', () => {
// Initialize Sidebar structure
Sidebar.init();
// Initialize Multi-level Menu logic
SidebarMenuApp.init();
// Initialize global Bootstrap theme management
new ThemeSwitcher().initialize();
});ThemeSwitcher is provided by theme-switcher-compostrap and switches Bootstrap's global
data-bs-theme.
The dashboard is built by integrating these core components:
- Sidebar skeleton - The structural layout and theme management.
- Sidebar menu - The multi-level navigation logic.
The dashboard supports Bootstrap Light and Dark themes through data-bs-theme.
<html lang="en" data-bs-theme="light">You can switch the value manually, with your own JavaScript, or by using the theme switcher from
theme-switcher-compostrap. Bootstrap components such as inputs, tables, dropdowns, and cards follow the
selected theme automatically.
The dashboard keeps Bootstrap's natural surface colors:
| Theme | Page background | Sidebar and content |
|---|---|---|
| Light | var(--bs-tertiary-bg) |
var(--bs-body-bg) |
| Dark | var(--bs-dark-bg-subtle) |
var(--bs-body-bg) |
This keeps form controls and other Bootstrap components visually aligned with the content surface without extra overrides.
The dashboard is the composition layer: it changes the global Bootstrap theme for the whole page. Sidebar packages read the same data-bs-theme, so no additional sidebar theme attribute is needed.
The theme switcher uses English labels by default. If your application handles translations in HTML templates, pass translated labels through data-* attributes:
<button
type="button"
class="btn btn-link nav-link theme-switcher py-2 px-0 px-lg-2 border-0 text-decoration-none"
aria-label="Toggle theme"
data-theme-switcher
data-theme-light-label="Light mode"
data-theme-dark-label="Dark mode"
>
<i data-theme-switcher-icon class="fa-solid fa-moon"></i>
<span data-theme-switcher-label>Dark mode</span>
</button>The JavaScript reads those values and updates the icon and label when the theme changes. If the attributes are missing, the default English labels and Font Awesome icons are used.
For modern visual enhancements like tinted menu backgrounds, custom icon colors, and refined alignment, we highly recommend using the sidebar-menu-custom package.