Browse docs
- Introduction
- Install
- Contents
- RTL
Getting started
- Color
- Paths
- Reset
- Dims
- Responsive
Customize
- Border
- Icon
- Layouts
- Typography
Structure
- Code Editor
- Demos
Examples and Test
- What We Think
- About Us
- FAQ
- License
About
Offcanvas
The Offcanvas component allows you to toggle content that slides in from different sides of the screen. It's ideal for navigation menus, sidebars, and panels. Offcanvas can appear from the left, right, top, or bottom and supports both static and scrollable content.
Description #
The Offcanvas component is a flexible panel that can slide in from any edge of the viewport. It supports multiple modes and features:
Static Mode (offcanvas-static): Offcanvas is always present in the DOM and toggled via classes and JavaScript.
Backdrop Support (offcanvas-backdrop): Adds a backdrop overlay when the panel is open, focusing user attention.
Scrollable/No-Scroll Modes: Control whether the body or the panel itself is scrollable when open.
Multiple Directions: Slide in from left, right, top, or bottom using modifier classes.
Examples and Classes #
Basic Example
offcanvas default
Welcome to the MIZ Offcanvas panel! Here you can place navigation links, user info, or any custom content to enhance your app's sidebar experience.
Quick Actions
<div class="offcanvas-static offcanvas-scroll offcanvas-backdrop">
<div class="offcanvas-toggle btn btn-primary">offcanvas default</div>
<div class="offcanvas-left bg-secondary-color on-primary-color">
<i class="fa-solid offcanvas-close fa-close on-primary-color icon-medium"></i>
<p class="mb-2">Welcome to the MIZ Offcanvas panel! Here you can place navigation links, user info, or any custom content to enhance your app's sidebar experience.</p>
<button class="btn btn-outline-success mb-1">Explore Features</button>
<div class="dropdown dropdown-bottom">
<div class="dropdown-box">Quick Actions <i class="fa-solid fa-chevron-down"></i></div>
<ul class="dropdown-menu">
<li><a href="#">Dashboard</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-submenu-toggle">Settings <i class="fa-solid fa-chevron-right"></i></a>
<ul class="dropdown-menu dropdown-right">
<li><a href="#">Profile</a></li>
<li><a href="#">Security</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-submenu-toggle">Advanced <i class="fa-solid fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-submenu-toggle">Integrations <i class="fa-solid fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a href="#">API Keys</a></li>
<li><a href="#">Webhooks</a></li>
</ul>
</li>
<li><a href="#">Logs</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-submenu-toggle">Help <i class="fa-solid fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Documentation</a></li>
<li><a href="#">Contact Support</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Top and Bottom Offcanvas
offcanvas top and bottom
Notifications
Stay up to date with the latest updates and alerts for your account.
Discover new features and tips to get the most out of MIZ Framework.
<div class="offcanvas-static offcanvas-no-scroll">
<div class="offcanvas-toggle btn btn-outline-success px-2 py-1">offcanvas top and bottom</div>
<div class="offcanvas-top bg-danger-regular-color on-primary-color">
<div class="offcanvas-close"><i class="fa-solid fa-close on-primary-color icon-medium"></i></div>
<h1>Notifications</h1>
<p>Stay up to date with the latest updates and alerts for your account.</p>
</div>
<div class="offcanvas-bottom bg-primary-color on-primary-color">
<div class="offcanvas-close"><i class="fa-solid fa-close on-primary-color icon-medium"></i></div>
<p>Discover new features and tips to get the most out of MIZ Framework.</p>
</div>
</div>
Left and Right Offcanvas
<div class="offcanvas-static offcanvas-no-scroll offcanvas-backdrop">
<div class="offcanvas-toggle btn btn-danger px-2 py-1">offcanvas left and right</div>
<div class="offcanvas-left bg-warning-regular-color on-primary-color">
<div class="offcanvas-close"><i class="fa-solid fa-close on-primary-color icon-medium"></i></div>
<p>Navigation Menu: <br> <a href="#">Home</a> | <a href="#">Profile</a> | <a href="#">Settings</a></p>
</div>
<div class="offcanvas-right bg-success-regular-color on-primary-color">
<div class="offcanvas-close"><i class="fa-solid fa-close on-primary-color icon-medium"></i></div>
<p>Welcome back! <br> Access your dashboard and manage your projects with ease.</p>
</div>
</div>
Available Classes
| Class | Description |
|---|---|
| .offcanvas-static | Main wrapper for the offcanvas panel. Controls layout and toggling. |
| .offcanvas-toggle | Button or element that triggers the offcanvas panel. |
| .offcanvas-left / .offcanvas-right / .offcanvas-top / .offcanvas-bottom | Panel direction. Determines from which side the offcanvas appears. |
| .offcanvas-scroll | Enables scrolling inside the offcanvas panel. |
| .offcanvas-no-scroll | Disables scrolling inside the offcanvas panel. |
| .offcanvas-backdrop | Adds a backdrop overlay when the panel is open. |
| .offcanvas-close | Element to close the offcanvas panel. |
| .active | Applied to the toggle when the offcanvas is open. |
Layout Variations
The Offcanvas component supports different layout variations:
- Left/Right: Slide in from the left or right edge of the screen.
- Top/Bottom: Slide in from the top or bottom edge of the screen.
- Backdrop: With or without a backdrop overlay.
- Scrollable/No-Scroll: Control scroll behavior for content or body.
File Locations #
| File | Path | Description |
|---|---|---|
| index.html | miz/themes/mizoon/components/offcanvas/index.html | Example implementation and documentation |
| _index.scss | miz/themes/mizoon/components/offcanvas/_index.scss | SCSS styles and variables |
| script.js | miz/themes/mizoon/components/offcanvas/script.js | JavaScript functionality |
SCSS Variables #
$offcanvas-static-custom-classes: ".d-flex, .flex-row, .justify-content-center, .align-items-center";
$offcanvas-close-custom-classes: ".w-fit-content, .d-flex, .justify-content-start, .cursor-pointer, .mb-2";
$offcanvas-backdrop-custom-classes: ".bg-secondary-color, .visibility-hidden, .w-100, .h-100, .position-fixed, .top-0, .left-0, .opacity-0, .cursor-pointer";
$offcanvas-backdrop-transition: all 300ms linear;
$offcanvas-backdrop-active-custom-classes: ".opacity-8, .visibility-visible";
$offcanvas-z-index: 1000;
JavaScript Implementation #
Class Structure
| Method/Property | Type | Description |
|---|---|---|
| constructor() | Method | Initializes the Offcanvas component and sets up event listeners |
| init() | Method | Sets up click event listeners for toggles, close buttons, and backdrops |
| toggleOffcanvas(trigger) | Method | Toggles the open/close state of the offcanvas panel |
| openOffcanvas(trigger) | Method | Opens the offcanvas panel and manages scroll behavior |
| closeOffcanvas(trigger) | Method | Closes the offcanvas panel and restores scroll behavior |
Implementation Example
class Offcanvas {
constructor() {
this.init();
}
init() {
document.querySelectorAll('.offcanvas-static.offcanvas-backdrop').forEach(offcanvas => {
const toggle = offcanvas.querySelector('.offcanvas-toggle');
if (toggle && !offcanvas.querySelector('.backdrop')) {
const backdrop = document.createElement('div');
backdrop.className = 'backdrop';
toggle.insertAdjacentElement('afterend', backdrop);
}
});
document.querySelectorAll('.offcanvas-toggle').forEach(trigger => {
trigger.addEventListener('click', () => this.toggleOffcanvas(trigger));
});
document.querySelectorAll('.offcanvas-close').forEach(closeBtn => {
closeBtn.addEventListener('click', () => {
const offcanvas = closeBtn.closest('.offcanvas-static');
const trigger = offcanvas.querySelector('.offcanvas-toggle');
this.closeOffcanvas(trigger);
});
});
document.querySelectorAll('.backdrop').forEach(backdrop => {
backdrop.addEventListener('click', () => {
const offcanvas = backdrop.closest('.offcanvas-static');
const trigger = offcanvas.querySelector('.offcanvas-toggle');
this.closeOffcanvas(trigger);
});
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
document.querySelectorAll('.offcanvas-toggle.active').forEach(trigger => {
this.closeOffcanvas(trigger);
});
}
});
}
toggleOffcanvas(trigger) {
if (trigger.classList.contains('active')) {
this.closeOffcanvas(trigger);
} else {
this.openOffcanvas(trigger);
}
}
openOffcanvas(trigger) {
const offcanvas = trigger.closest('.offcanvas-static');
trigger.classList.add('active');
if (offcanvas.classList.contains('offcanvas-scroll')) {
document.body.style.overflow = 'unset';
} else if (offcanvas.classList.contains('offcanvas-no-scroll')) {
document.body.style.overflow = 'hidden';
}
}
closeOffcanvas(trigger) {
const offcanvas = trigger.closest('.offcanvas-static');
trigger.classList.remove('active');
const activeOffcanvas = document.querySelector('.offcanvas-static .offcanvas-toggle.active');
if (activeOffcanvas) {
const activeOffcanvasParent = activeOffcanvas.closest('.offcanvas-static');
if (activeOffcanvasParent.classList.contains('offcanvas-scroll')) {
document.body.style.overflow = 'unset';
} else if (activeOffcanvasParent.classList.contains('offcanvas-no-scroll')) {
document.body.style.overflow = 'hidden';
}
} else {
document.body.style.overflow = '';
}
}
}
document.addEventListener('DOMContentLoaded', () => {
window.offcanvas = new Offcanvas();
});
To use this component, you need to:
Include the MIZCHIN JavaScript file in your page.