Offcanvas component in Bootsrap

Introduction

An offcanvas component lets you show hidden content that slides in from the side of the screen. It helps keep your page clean and lets users focus on main content.

To show a menu or navigation on small screens without taking space all the time.

To display extra options or filters without cluttering the main page.

To show notifications or messages that can slide in and out.

To create a sidebar that appears only when needed.

To keep important but not always needed content accessible.

Syntax

Bootsrap

<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>

The data-bs-toggle="offcanvas" attribute on the button triggers the offcanvas.

The offcanvas-start class makes it slide in from the left. You can use offcanvas-end, offcanvas-top, or offcanvas-bottom for other directions.

Examples

This example shows an offcanvas sliding in from the right side.

Bootsrap

<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
  Open Right Offcanvas
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Right Side Panel</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    This panel slides in from the right.
  </div>
</div>

This example shows an offcanvas sliding up from the bottom.

Bootsrap

<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
  Open Bottom Offcanvas
</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Bottom Panel</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    This panel slides up from the bottom.
  </div>
</div>

Sample Program

This is a simple webpage with a button that opens a menu sliding in from the left. The menu contains links. The offcanvas can be closed by clicking the close button or outside the panel.

Bootsrap

<!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>
  <main class="container py-4">
    <h1>Offcanvas Component Demo</h1>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      Show Menu
    </button>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="list-unstyled">
          <li><a href="#" class="text-decoration-none">Home</a></li>
          <li><a href="#" class="text-decoration-none">About</a></li>
          <li><a href="#" class="text-decoration-none">Services</a></li>
          <li><a href="#" class="text-decoration-none">Contact</a></li>
        </ul>
      </div>
    </div>
  </main>

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

Important Notes

Always include aria-controls and aria-labelledby for accessibility.

Use Bootstrap's JavaScript bundle to enable the offcanvas functionality.

Offcanvas works well on mobile and desktop for hiding extra content.

Summary

Offcanvas lets you hide content off-screen and slide it in when needed.

Use data attributes to toggle offcanvas with buttons.

It improves user experience by keeping the page clean and focused.

Practice

1. What is the main purpose of the Bootstrap offcanvas component?

easy

A. To hide content off-screen and slide it in when triggered

B. To create a fixed header at the top of the page

C. To add a footer with copyright information

D. To display modal popups in the center of the screen

Solution

1. Step 1: Understand the offcanvas component role

   The offcanvas component is designed to keep content hidden off-screen initially.

2. Step 2: Recognize its behavior on trigger

   When triggered, it slides in to show the hidden content, improving page focus.

3. Final Answer:

   To hide content off-screen and slide it in when triggered -> Option A

4. Quick Check:

   Offcanvas = hidden sliding content [OK]

Hint: Offcanvas slides content in from off-screen [OK]

Common Mistakes:

• Confusing offcanvas with modal popups
• Thinking it creates fixed headers or footers
• Assuming it always shows content without sliding

2. Which of the following is the correct way to toggle an offcanvas component using a button in Bootstrap?

easy

A. Toggle

B. Toggle

C. Toggle

D. Toggle

Solution

1. Step 1: Identify the correct data attribute for offcanvas toggle

   Bootstrap uses data-bs-toggle="offcanvas" to toggle offcanvas components.

2. Step 2: Confirm the target attribute

   The data-bs-target attribute points to the offcanvas element's ID, e.g., #myOffcanvas.

3. Final Answer:

   <button data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">Toggle</button> -> Option C

4. Quick Check:

   Toggle offcanvas = data-bs-toggle="offcanvas" [OK]

Hint: Use data-bs-toggle="offcanvas" to toggle offcanvas [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle
• Using modal or dropdown toggle attributes
• Missing the correct data-bs-target selector

3. What will happen when the following code is rendered and the button is clicked?

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">Open</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
  <div class="offcanvas-header">
    <h5>Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">Content here</div>
</div>

medium

A. Nothing happens because the offcanvas is missing a JavaScript import

B. A modal popup appears in the center with 'Menu' and 'Content here'

C. The button triggers a dropdown menu instead of offcanvas

D. A sidebar slides in from the left showing 'Menu' and 'Content here'

Solution

1. Step 1: Analyze the button attributes

   The button uses data-bs-toggle="offcanvas" and targets #demoOffcanvas, so it triggers the offcanvas component.

2. Step 2: Understand the offcanvas element classes

   The offcanvas has class offcanvas-start, meaning it slides in from the left side.

3. Final Answer:

   A sidebar slides in from the left showing 'Menu' and 'Content here' -> Option D

4. Quick Check:

   offcanvas-start = slide from left [OK]

Hint: offcanvas-start slides from left, triggered by data-bs-toggle [OK]

Common Mistakes:

• Confusing offcanvas with modal popups
• Forgetting to include Bootstrap JS for functionality
• Assuming offcanvas appears as dropdown

4. Identify the error in this offcanvas toggle button code:

<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-target="#sidePanel">Show</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="sidePanel">
  <div class="offcanvas-header">
    <h5>Side Panel</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">Details here</div>
</div>

medium

A. The offcanvas element is missing the class show

B. The button uses incorrect attribute data-target instead of data-bs-target

C. The button should have type="submit" to work

D. The offcanvas ID should not contain uppercase letters

Solution

1. Step 1: Check button data attributes for toggling offcanvas

   Bootstrap 5 requires data-bs-target for toggling, not data-target.

2. Step 2: Verify other attributes and classes

   The offcanvas element and button classes are correct; no need for show class initially.

3. Final Answer:

   The button uses incorrect attribute data-target instead of data-bs-target -> Option B

4. Quick Check:

   Use data-bs-target, not data-target [OK]

Hint: Bootstrap 5 uses data-bs-target, not data-target [OK]

Common Mistakes:

• Using old Bootstrap 4 attribute names
• Adding show class manually on offcanvas
• Assuming button needs type="submit"

5. You want an offcanvas panel that slides in from the bottom and closes when the user clicks outside it or presses Escape. Which combination of classes and attributes should you use?

hard

A. Use offcanvas-bottom class on the offcanvas and ensure tabindex="-1" is set

B. Use offcanvas-top class and add data-bs-backdrop="false"

C. Use offcanvas-end class and omit tabindex attribute

D. Use offcanvas-start class and add data-bs-scroll="true"

Solution

1. Step 1: Choose the correct offcanvas position class

   To slide in from the bottom, use the offcanvas-bottom class.

2. Step 2: Ensure accessibility and closing behavior

   Setting tabindex="-1" allows keyboard focus and enables closing with Escape key and outside clicks by default.

3. Final Answer:

   Use offcanvas-bottom class on the offcanvas and ensure tabindex="-1" is set -> Option A

4. Quick Check:

   Bottom offcanvas = offcanvas-bottom + tabindex="-1" [OK]

Hint: Bottom offcanvas uses offcanvas-bottom and tabindex="-1" [OK]

Common Mistakes:

• Using offcanvas-top instead of offcanvas-bottom
• Disabling backdrop with data-bs-backdrop="false"
• Omitting tabindex attribute causing keyboard issues