Offcanvas

Bootstrap Offcanvas: The Hidden Drawer That Slides Into View 🚪

The Magic Sliding Door Analogy

Imagine your house has a secret room behind a sliding door. When you push a button, the door slides open from the side, top, or bottom — revealing everything inside. When you’re done, you slide it back and it hides away again!

That’s exactly what Bootstrap Offcanvas does for websites. It’s a hidden panel that slides into view when needed, then slides away when you’re done.

What is Offcanvas?

Think of Offcanvas like a drawer in your desk:

• 📦 The drawer is hidden until you pull it
• 🖐️ You pull the drawer to see what’s inside
• ✅ You push it back when you’re finished
• 🎯 It saves space by staying hidden when not needed

Real Life Examples:

• 📱 The menu that slides in from the side on mobile apps
• 🛒 Shopping cart that appears from the right on websites
• ⚙️ Settings panel that slides down from the top

Offcanvas Components

Every Offcanvas has three parts — like a gift box!

1. The Container (The Box)

<div class="offcanvas offcanvas-start"
     id="myDrawer">
  <!-- Everything goes inside -->
</div>

2. The Header (The Lid with a Label)

<div class="offcanvas-header">
  <h5 class="offcanvas-title">
    Menu
  </h5>
  <button type="button"
          class="btn-close"
          data-bs-dismiss="offcanvas">
  </button>
</div>

3. The Body (The Stuff Inside)

<div class="offcanvas-body">
  <p>Your content here!</p>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

4. The Trigger Button

<button data-bs-toggle="offcanvas"
        data-bs-target="#myDrawer">
  Open Drawer
</button>

Complete Example:

<!-- Button to open -->
<button class="btn btn-primary"
        data-bs-toggle="offcanvas"
        data-bs-target="#myDrawer">
  Open Menu
</button>

<!-- The Offcanvas -->
<div class="offcanvas offcanvas-start"
     id="myDrawer">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Menu</h5>
    <button class="btn-close"
            data-bs-dismiss="offcanvas">
    </button>
  </div>
  <div class="offcanvas-body">
    <p>Hello from the drawer!</p>
  </div>
</div>

Offcanvas Placement

The drawer can slide in from four directions — like doors on all sides of a room!

graph TD
    A["📱 Your Screen"] --> B["⬅️ START<br>Left Side"]
    A --> C["➡️ END<br>Right Side"]
    A --> D["⬆️ TOP<br>From Above"]
    A --> E["⬇️ BOTTOM<br>From Below"]

Left Side (Default)

<div class="offcanvas offcanvas-start">
  <!-- Slides from LEFT -->
</div>

🏠 Use For: Main navigation menus

Right Side

<div class="offcanvas offcanvas-end">
  <!-- Slides from RIGHT -->
</div>

🛒 Use For: Shopping carts, notifications

From Top

<div class="offcanvas offcanvas-top">
  <!-- Slides from TOP -->
</div>

🔔 Use For: Alerts, search bars

From Bottom

<div class="offcanvas offcanvas-bottom">
  <!-- Slides from BOTTOM -->
</div>

📋 Use For: Action sheets, options menu

Offcanvas Backdrop

The backdrop is like a curtain behind the drawer. It dims the rest of the page so you focus on the drawer!

graph TD
    A["Backdrop Options"] --> B["🌫️ Default<br>Dark overlay<br>Click closes"]
    A --> C["🚫 No Backdrop<br>No overlay<br>See everything"]
    A --> D[🔒 Static<br>Dark overlay<br>Click won't close]

Default Backdrop

<div class="offcanvas offcanvas-start"
     id="drawer1">
  <!-- Has dark overlay -->
  <!-- Clicking backdrop closes it -->
</div>

No Backdrop (Scroll Allowed)

<div class="offcanvas offcanvas-start"
     data-bs-backdrop="false"
     data-bs-scroll="true"
     id="drawer2">
  <!-- No dark overlay -->
  <!-- Can scroll page behind it -->
</div>

Static Backdrop (Can’t Click to Close)

<div class="offcanvas offcanvas-start"
     data-bs-backdrop="static"
     id="drawer3">
  <!-- Has dark overlay -->
  <!-- Must click X button to close -->
</div>

Offcanvas Responsive

Sometimes you want the drawer only on small screens — like phones! On big screens, you want the content to show normally.

Think of it like a transformer toy 🤖:

• 📱 On phone → Hidden drawer that slides
• 💻 On computer → Normal visible content

How It Works

<div class="offcanvas-lg offcanvas-start"
     id="responsiveDrawer">
  <!-- Hidden drawer on screens < 992px -->
  <!-- Normal visible content on >= 992px -->
</div>

Breakpoint Classes

Complete Responsive Example

<!-- Only shows button on small screens -->
<button class="btn btn-primary d-lg-none"
        data-bs-toggle="offcanvas"
        data-bs-target="#sidebar">
  ☰ Menu
</button>

<!-- Responsive offcanvas -->
<div class="offcanvas-lg offcanvas-start"
     id="sidebar">
  <div class="offcanvas-header">
    <h5>Navigation</h5>
    <button class="btn-close d-lg-none"
            data-bs-dismiss="offcanvas">
    </button>
  </div>
  <div class="offcanvas-body">
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</div>

📱 On Phone: Shows hamburger button, menu slides from left 💻 On Desktop: Menu is always visible, no button needed

Quick Summary

You Did It! 🎉

Now you know how to:

• ✅ Create a sliding drawer with Offcanvas
• ✅ Add a header, body, and close button
• ✅ Choose which direction it slides from
• ✅ Control the backdrop behavior
• ✅ Make it responsive for different screens

Offcanvas is your new best friend for saving space and creating smooth, mobile-friendly menus!