BootstrapHow-ToBeginner · 4 min read

How to Create Offcanvas in Bootstrap: Simple Guide

To create an offcanvas in Bootstrap, use a button with data-bs-toggle="offcanvas" and data-bs-target attributes to trigger a div with the offcanvas class. The offcanvas panel slides in from the side and can be closed with a close button or by clicking outside.

📐

Syntax

The basic structure for an offcanvas includes a trigger button and the offcanvas panel itself.

button: Has data-bs-toggle="offcanvas" to activate the panel.
data-bs-target: Points to the offcanvas panel's ID.
div.offcanvas: The panel container with position classes like offcanvas-start (left side), offcanvas-end (right side), etc.
offcanvas-header and offcanvas-body: For header and content inside the panel.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Toggle Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content goes here.
  </div>
</div>

💻

Example

This example shows a button that opens an offcanvas sidebar from the left. The panel has a header with a close button and some body content.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Offcanvas Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    Toggle Offcanvas
  </button>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <p>This is the content inside the offcanvas panel.</p>
      <p>You can put links, text, or any HTML here.</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a blue button labeled 'Toggle Offcanvas'. Clicking it slides in a sidebar from the left with a title, close button, and some text content.

⚠️

Common Pitfalls

Forgetting to include Bootstrap's JavaScript bundle will prevent the offcanvas from working.
Not setting tabindex="-1" on the offcanvas div can cause accessibility issues.
Using incorrect data-bs-target that doesn't match the offcanvas id will break the toggle.
Missing aria-controls and aria-labelledby attributes reduces accessibility.

html

<!-- Wrong: Missing data-bs-target -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas">
  Toggle Offcanvas
</button>

<!-- Right: Correct data-bs-target -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Toggle Offcanvas
</button>

📊

Quick Reference

Offcanvas Position Classes:

offcanvas-start: Slides in from the left.
offcanvas-end: Slides in from the right.
offcanvas-top: Slides down from the top.
offcanvas-bottom: Slides up from the bottom.

Use data-bs-toggle="offcanvas" on buttons and match data-bs-target to the offcanvas id.

✅

Key Takeaways

Use a button with data-bs-toggle="offcanvas" and data-bs-target="#id" to open the offcanvas panel.

The offcanvas panel needs the class offcanvas and a position class like offcanvas-start for left side.

Include Bootstrap's JavaScript bundle for the offcanvas to work properly.

Add aria attributes and tabindex="-1" for accessibility.

Match data-bs-target exactly with the offcanvas panel's id to avoid toggle issues.