##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Offcanvas

The Offcanvas component provides a powerful way to create sliding panels that reveal content from any edge of the viewport. Perfect for navigation menus, filters, forms, or any secondary content that needs to be easily accessible without disrupting the main content flow. With support for multiple positions, backdrop options, and responsive behaviors, offcanvas panels offer flexible solutions for modern web interfaces.

### Basic Example

Demonstrate the basic offcanvas functionality with both link and button triggers. The panel can contain any content, from simple text to complex components.

Basic Offcanvas Example
Loading...
Basic Offcanvas Example
Loading...

### Body Scrolling

Enable content scrolling behind the offcanvas panel using the `data-bs-scroll="true"` attribute. This allows users to continue interacting with the main content while the offcanvas is open.

Scrollable Body Example
Loading...
Scrollable Body Example
Loading...

### Scrolling with Backdrop

Combine scrollable content with a backdrop overlay for a semi-modal experience. The backdrop provides visual separation while maintaining content scrollability.

Scrollable with Backdrop
Loading...
Scrollable with Backdrop
Loading...

### Static Backdrop

Create a modal-like experience with `data-bs-backdrop="static"` where users must explicitly close the offcanvas using the close button. This prevents accidental dismissal through backdrop clicks.

Static Backdrop Example
Loading...
Static Backdrop Example
Loading...

### Responsive Behavior

Create responsive offcanvas components that adapt to different screen sizes using the `offcanvas-{breakpoint}` classes. This example shows an offcanvas that transforms into inline content on larger screens.

Responsive Offcanvas Example
Loading...
Responsive Offcanvas Example
Loading...

### Placement Options

Offcanvas panels can slide in from any edge of the viewport using placement classes: `offcanvas-start` (left), `offcanvas-end` (right), `offcanvas-top` (top), and `offcanvas-bottom` (bottom). Choose the placement that best suits your design and content needs.

Top Placement Example
Loading...
Top Placement Example
Loading...
Right Placement Example
Loading...
Right Placement Example
Loading...
Bottom Placement Example
Loading...
Bottom Placement Example
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates