Simple Sidebar is a free, open-source Bootstrap HTML template from Start Bootstrap that provides a responsive off-canvas sidebar navigation layout for web projects. The template is built on the Bootstrap framework, listed for compatibility with both Bootstrap 4 and Bootstrap 5, and is released under the MIT license for unlimited personal and commercial use.
What is Simple Sidebar?
Simple Sidebar is a static website template whose core function is to deliver a page with a fixed sidebar that collapses off-canvas on smaller screens. It takes independent HTML, SCSS, and JavaScript source files and compiles them into a plain HTML/CSS/JS website inside a dist folder, requiring no server-side runtime. The template was created by Start Bootstrap, an open-source library of free Bootstrap templates maintained by David Miller.
Key Features
- Off-canvas navigation — The sidebar sits off-screen on mobile and slides in when the user clicks the toggle button, giving a dashboard-like navigation pattern.
- Bootstrap 4 and 5 support — The official repository lists both bootstrap-4 and bootstrap-5 topics, so the layout can be paired with either major Bootstrap version.
- Pug and SCSS source — The src directory contains Pug for HTML generation and SCSS for styling, while the npm scripts compile everything into plain HTML and CSS in dist.
- npm build environment — Scripts include build, build:assets, build:pug, build:scripts, build:scss, clean, and start:debug, giving you granular control over the compilation pipeline.
- Live-reload development server — Running npm start opens a preview in your default browser and automatically reloads on changes to files in src.
- Simple dist output — The dist directory contains only the compiled HTML, CSS, and JS files you need to edit, so you can ignore the build tooling if you prefer direct editing.
Who is it for?
- Front-end developers — who need a minimal starting point to add sidebar navigation to a Bootstrap-based project and want the option to work directly with compiled files or use the Pug/SCSS source.
- Dashboard and admin UI teams — who are building an internal tool and want a proven off-canvas sidebar pattern to integrate with their own charts, forms, and content.
- Designers learning Bootstrap — who can study the template's SCSS and JavaScript to see how the off-canvas toggle behavior is implemented.
What can you do with Simple Sidebar?
- Prototype a dashboard: Drop the sidebar into a new project, then replace the placeholder content with your own metrics and panels.
- Create a documentation site: Use the sidebar as a table of contents and the main column for longer-form articles and API references.
- Build a personal profile page: Use the sidebar for contact links and the main area for a bio, portfolio samples, or a resume.
How does Simple Sidebar work?
To use the basic workflow, download the latest release, edit the files inside the dist directory, and open index.html in a web browser to preview changes. For the advanced workflow, clone the GitHub repository, run npm install, then run npm start to launch a live-reloading development server. Additional npm scripts let you build assets, compile Pug, compile SCSS, and copy scripts into dist separately.
Pricing
Simple Sidebar is free and open source. It is released under the MIT license, and the full source code plus compiled files are available for download from Start Bootstrap or through npm with npm i startbootstrap-simple-sidebar.
FAQ
Is Simple Sidebar free?
Yes, Simple Sidebar is completely free under the MIT license. You can use it for personal or commercial projects without paying anything, and you are allowed to modify and redistribute it.
What does Simple Sidebar do?
Simple Sidebar provides a responsive off-canvas sidebar navigation layout built on Bootstrap. It includes the HTML, SCSS, and JavaScript needed to create a page where the sidebar collapses off-screen on small displays and toggles open with a button.
Does Simple Sidebar work with Bootstrap 4 or 5?
The repository's topics include both bootstrap-4 and bootstrap-5, so the template is designed to work with either major version. When using the compiled assets, you'll match the version that your project already uses.
How do I run the development server?
After cloning the repository, run npm install to install dependencies, then run npm start. This starts a local preview in your default browser, watches the src directory for changes, and live-reloads the page on save.
Can I edit the HTML directly?
Yes. The dist folder contains the finished HTML, CSS, and JavaScript files, so you can edit those and open index.html in a browser. The advanced Pug/SCSS build setup is optional for users who only need to customize the compiled output.
