Simple and fast sidebar skeleton built on Bootstrap 5.
npm install sidebar-skeleton-compostrapImport the styles and initialize the components in your JavaScript entry point:
import 'sidebar-skeleton-compostrap/sidebar.css';
import { SidebarSkeleton } from 'sidebar-skeleton-compostrap';
// Initialize Sidebar structure
SidebarSkeleton.init();The theme switcher is provided by theme-switcher-compostrap:
import 'theme-switcher-compostrap/theme-switcher.css';
import { Sidebar } from 'sidebar-skeleton-compostrap';
import { ThemeSwitcher } from 'theme-switcher-compostrap';
Sidebar.init();
new ThemeSwitcher().initialize();Simple and fast sidebar skeleton is built on Bootstrap. You should be familiar with Bootstrap usage and have basic knowledge of Sass, npm.
When using a navbar, extend the class called wrapper:
| Navbar | Class |
|---|---|
| unused | wrapper |
| Used | wrapper-navbar-used |
| Used (fixed) | wrapper-navbar-fixed |
| Description | Class |
|---|---|
| Right top rounded in sidebar | sidebar-rounded-top-right |
| Fixed menu in sidebar | sidebar-menu-fixed |
The sidebar follows Bootstrap's global theme through the data-bs-theme attribute.
Use theme-switcher-compostrap when you want a ready-made switcher that persists the user's choice in the
browser's localStorage.
<html lang="en" data-bs-theme="light">The sidebar background uses var(--bs-body-bg), so it stays aligned with Bootstrap's light and dark surfaces.
Packages built on top of the sidebar skeleton, such as sidebar-menu-compostrap, use the same global Bootstrap theme.
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"
aria-label="Toggle theme"
data-theme-switcher
data-theme-light-label="Switch to light"
data-theme-dark-label="Switch to dark"
>
<span data-theme-switcher-label>Switch to dark</span>
</button>The JavaScript reads those values and updates the button text when the theme changes. If the attributes are missing, the default English labels are used.
Icons are optional and can come from any icon library loaded by your project:
<button
type="button"
class="btn btn-link nav-link theme-switcher"
data-theme-switcher
data-theme-light-icon="fa-solid fa-sun"
data-theme-dark-icon="fa-solid fa-moon"
>
<i data-theme-switcher-icon></i>
<span data-theme-switcher-label>Switch to dark</span>
</button>If you want your own toggle button visible at all resolutions, update the class in sidebar.js:
| Description | Class |
|---|---|
| Visible in small devices | sidebar-toggle |
| Visible all resolution | sidebar-toggle-visible |
On smaller screens, the sidebar opens as an overlay and does not push the page content. A backdrop is added automatically and clicking it closes the sidebar. From the md breakpoint up, the sidebar stays visible in the normal layout.