Basic Offcanvas

Simple offcanvas panel from the start

Offcanvas Title

This is the offcanvas body content. You can put any content here including text, images, forms, and more.

The offcanvas slides in from the side of the screen and can be dismissed by clicking the close button or clicking outside.

Static Backdrop

Offcanvas that doesn't close on backdrop click

Static Backdrop

I won't close when you click outside of me. You must use the close button to dismiss this offcanvas.

This is useful for important content that requires user interaction before dismissing.

Placement Options
Offcanvas Directions

Start, end, top, and bottom placement

Offcanvas Start

This offcanvas slides in from the left (start) side of the screen.

Offcanvas End

This offcanvas slides in from the right (end) side of the screen.

Offcanvas Top

This offcanvas slides in from the top of the screen.

Offcanvas Bottom

This offcanvas slides in from the bottom of the screen.

Backdrop & Scroll Options
Body Scrolling

Allow scrolling when offcanvas is open

Body Scrolling Enabled

Try scrolling the rest of the page while this offcanvas is open.

The page content is still scrollable because data-bs-scroll="true" is set.

Scroll + Backdrop

Both scrolling and backdrop enabled

Scroll + Backdrop

Both body scrolling and backdrop are enabled here.

The backdrop is visible but you can still scroll the page content.

No Backdrop

Offcanvas without backdrop overlay

No Backdrop

This offcanvas has no backdrop overlay.

The page behind remains fully visible and interactive.

Real-World Examples
Mobile Navigation

Slide-out navigation menu

Logo
  • Dashboard
  • Profile
  • Messages 3
  • Notifications
  • Settings

  • Logout
Shopping Cart

E-commerce cart sidebar

Shopping Cart (2)
Product
Wireless Headphones

Color: Black

$149.99
Product
USB-C Cable

Length: 2m

$19.99
Subtotal $189.97
Shipping Calculated at checkout
Filter Panel

Product filter sidebar

Filters
Categories
Price Range
Rating