Bootstrap 5 Offcanvas

How it works

Offcanvas presents supplemental content in a drawer. A labelled panel, a named close button and a predictable focus return are part of its usable contract. Choose end or start according to reading direction and the trigger relationship, not a copied screenshot. A modal drawer should not leave the user interacting with obscured background controls. This standalone example opens from the end side and contains optional event detail, while Bhylu’s own tutorial drawer retains its separate shared implementation.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS and the matching JavaScript bundle beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence and bundled Popper licence with redistributed assets.

Download this complete HTML source.

This example needs the complete local setup with the Bootstrap JavaScript bundle. The restricted CSS playground does not reproduce this example’s full contract.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Use a Drawer With a Clear Return Route</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<button id="open-drawer" class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#arrival-drawer" aria-controls="arrival-drawer">Arrival details</button><aside class="offcanvas offcanvas-end" tabindex="-1" id="arrival-drawer" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title h5" id="drawer-title">Arrival details</h2><button id="close-drawer" type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close arrival details"></button></div><div class="offcanvas-body"><p>Use the east entrance from 09:30.</p><p class="mb-0">Leave the doorway clear while waiting.</p></div></aside>
</main>
  <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

Expected result

The drawer opens at the viewport end, receives focus and dismisses with Escape, returning focus to its trigger.

aria-controls connects the opener and panel; the title labels the dialog-like region after the plugin activates it. Width should remain usable on a narrow screen. The review checks the shown state and keyboard dismissal in both viewport sizes instead of assuming that a working mouse close control is enough.