Offcanvas
Mon, June 29, 2026

Offcanvas

Premium drawer sidebars sliding from any edge of the viewport, configured with backdrop variations, page scrolling support, and dark theme designs.

Offcanvas Placement

Slide sidebars from the left (start), right (end), top, or bottom edges of the screen viewport.

Backdrop & Body Scroll Controls

Control whether the page body remains scrollable and toggle the visibility of the dark overlay backdrop.

Dark Offcanvas

Theme drawers with premium dark slate linear gradients, suitable for sidebar telemetry panels or diagnostic detail overlays.

Left Sidebar Drawer
This drawer container slides from the start/left edge. It occupies the standard layout side height and is ideal for custom navigation, telemetry charts, or notification settings.
Right Sidebar Drawer
Patient Summary
Name: Emily Watson
ID: P-00891
Specialty: Endocrinology
Status: Active Inpatient

Use this right-side panel layout to display contextual information about selected grid rows without leaving the page view.

Top Sheet Drawer
This sheet slides down from the top edge. It fits standard announcement widgets, global broadcast alerts, or full-width search input panels.
Bottom Sheet Drawer
This sheet slides up from the bottom edge of the screen, commonly used in mobile application layouts for options sheets or quick action selectors.
No Backdrop
This drawer has data-bs-backdrop="false". Notice that opening it does not add a dark layout overlay, but clicking outside the panel will still dismiss it.
Body Scroll Enabled
This drawer has data-bs-scroll="true" and data-bs-backdrop="false". You can click and scroll through the primary page details underneath while this drawer remains open.
Scroll & Backdrop
This drawer is configured with both data-bs-scroll="true" and data-bs-backdrop="true". The dark overlay backdrop is visible, yet the background page body remains scrollable.
Dark Left Drawer
Dark theme slate backdrop details. Features crisp white text alignment and clean separation border lines.
Telemetry Overview
Live ECG Monitor
Heart Rate: 72 BPM
Oxygen Saturation: 98%
Systolic BP: 120 mmHg

ECG updates sync securely through clinical socket connections every 120ms.