A responsive sidebar component extension for Wappler
npm install @benpley/wappler-responsive-sidebarA complete responsive sidebar layout component extension for Wappler with header, collapsible navigation, and main content area.
- ✅ Fully Responsive - Desktop sidebar, mobile offcanvas
- 🎨 Easy Customization - Edit CSS file directly for styling
- 📱 Mobile-First - Bootstrap 5 offcanvas on mobile devices
- 🔧 Easy to Use - Slot-based architecture for flexible content
- 🎯 App Connect Integration - Dynamic data binding support
- ⚡ Lightweight - Minimal JavaScript footprint
1. Open your Project Settings in Wappler
2. Navigate to the Extensions section
3. Click on Add Extension
4. Use the Extension Browser dialog to browse or search for @benpley/wappler-responsive-sidebar
5. Click the Add button to add the extension to your project
You can also install directly via npm:
``bash`
npm install @benpley/wappler-responsive-sidebar
Then add the extension through Wappler's Extension Manager.
1. Download the extension files
2. Copy the wappler-responsive-sidebar folder to your Wappler extensions directory:C:\\Users\\[YourUsername]\\AppData\\Local\\Wappler\\extensions\\
- Windows: ~/Library/Application Support/Wappler/extensions/
- macOS: ~/.config/Wappler/extensions/
- Linux:
3. Restart Wappler
1. Open your Wappler project
2. Add the Responsive Sidebar component from the Layout category in the App Connect panel
3. Customize the slots with your content
4. Modify css/responsive-sidebar.css in your project's public folder to customize styling
The sidebar component uses slots for maximum flexibility:
`html
brand-url="/"
sidebar-title="Navigation">

$3
| Slot | Description | Required |
|------|-------------|----------|
|
brand | Logo or brand content in header | Optional |
| header-right | Right side of header (buttons, user menu, etc.) | Optional |
| menu | Sidebar navigation menu | Required |
| footer | Sidebar footer content | Optional |
| main | Main page content area | Required |Properties
$3
| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
id | string | - | Unique component identifier (required) |
| brand-text | string | 'Brand' | Brand text displayed in header |
| brand-url | string | '/' | URL for brand link |
| sidebar-title | string | 'Navigation' | Title shown in mobile offcanvas |$3
All properties support App Connect data binding:
`html
dmx-bind:brand-text="appData.brandName"
dmx-bind:brand-url="appData.homeUrl">
`Actions
The component provides the following actions for dynamic updates:
$3
Dynamically change the brand text:
`javascript
sidebar1.setBrandText('New Brand Name');
`$3
Dynamically change the brand URL:
`javascript
sidebar1.setBrandUrl('/new-home');
`$3
Dynamically change the sidebar title (mobile view):
`javascript
sidebar1.setSidebarTitle('Menu');
`Events
| Event | Description |
|-------|-------------|
|
rendered | Fired when the sidebar is initially rendered |
| updated | Fired when the sidebar is updated |$3
`html
dmx-on:rendered="console.log('Sidebar rendered')"
dmx-on:updated="refreshData()">
`Styling
$3
All styling is controlled through the
css/responsive-sidebar.css file in your project's public folder. Simply edit this file to customize:- Header colors and shadows
- Sidebar colors and width
- Menu item styling and hover effects
- Responsive breakpoints
- Dark mode support
Example customizations:
`css
/ Change header background color /
.bd-navbar {
background-color: #2c3e50 !important;
color: white;
}/ Change sidebar background /
.bd-sidebar,
.bd-sidebar .offcanvas-lg,
.bd-sidebar .offcanvas-body {
background-color: #34495e !important;
}
/ Customize menu links /
.bd-links a {
color: #ecf0f1;
border-radius: 0.25rem;
}
.bd-links a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/ Remove header shadow /
.bd-navbar {
box-shadow: none;
}
/ Adjust sidebar width /
@media (min-width: 992px) {
.bd-sidebar {
min-width: 16rem;
max-width: 24rem;
}
}
`$3
| Class | Description |
|-------|-------------|
|
.bd-navbar | Header navbar |
| .bd-sidebar | Sidebar container |
| .bd-links | Sidebar navigation area |
| .bd-main | Main content area |
| .bd-layout | Grid layout container |Examples
$3
`html
brand-text="Dashboard"
brand-url="/dashboard">
Welcome to Dashboard
`$3
`html
`$3
`html
dmx-bind:brand-text="appConfig.name">
<%- await include(content, locals); %>
`Requirements
- Wappler 4.0 or higher
- Bootstrap 5 (included in most Wappler projects)
- Node.js 12.0.0 or higher (for npm installation)
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
Troubleshooting
$3
- Ensure Bootstrap 5 is included in your project
- Check that the component ID is unique
- Verify that all required slots are present$3
- Ensure Bootstrap 5 JavaScript is loaded
- Check browser console for JavaScript errors$3
- Check css/responsive-sidebar.css` in your project's public folderMIT License - see LICENSE.md for details
Copyright (c) 2025 Ben Pleysier
For issues or questions:
- Check the troubleshooting section above
- Visit the Wappler Community Forum
---
Made with ❤️ for the Wappler Community