An enhanced, modern visual extension for the sidebar menu with advanced styling capabilities.
npm install sidebar-menu-2-compostrapLoad the base sidebar menu styles first, then the custom extension styles:
import 'sidebar-menu-compostrap/sidebar-menu.css';
import 'sidebar-menu-2-compostrap/sidebar-custom.css';The demo uses theme-switcher-compostrap with Font Awesome icons:
import 'theme-switcher-compostrap/theme-switcher.css';
import { ThemeSwitcher } from 'theme-switcher-compostrap';
new ThemeSwitcher({
lightIcon: 'fa-solid fa-sun',
darkIcon: 'fa-solid fa-moon',
}).initialize();Compared to the standard menu, this custom version provides:
- Modern Visuals: Subtle background tints for first-level links and smooth transitions.
- Improved Layout: Precise pixel-perfect alignment for rotating arrows in submenus.
- Theme Optimized: Specifically tuned background opacities for both light and dark modes.
- CSS Variables: Unified styling through global variables (e.g.,
--sm-modern-border-radius).
Full support for Bootstrap Light and Dark themes out of the box.
<html lang="en" data-bs-theme="light">This package is only a visual extension of sidebar-menu-compostrap. It does not replace the base menu theme logic.
The base sidebar menu still controls link and arrow colors. This custom package adds subtle first-level backgrounds, Bootstrap primary icon highlighting, border styling, and layout refinements.
Use theme-switcher-compostrap when you want to switch the global Bootstrap theme from the UI.