What is Offcanvas component in Bootsrap?

Bootsrapmarkup~5 mins

Offcanvas component in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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>

OutputSuccess

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.