Prev Next

BS5 Offcanvas

Bootstrap 5 Offcanvas provides hidden sidebars or menus that can slide in and out, offering extra navigation or content without taking up permanent space.

Key Topics

Basic Offcanvas

Create a basic offcanvas sidebar using the .offcanvas class and trigger it with a button.

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

<!-- Offcanvas -->
<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">
        Some content inside the offcanvas.
    </div>
</div>

Explanation: Use the .offcanvas class for the container and data-bs-toggle="offcanvas" on the trigger button to open it.

Offcanvas with Header

Add a header to the offcanvas using the .offcanvas-header and .offcanvas-title classes.

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasWithHeader" aria-labelledby="offcanvasWithHeaderLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasWithHeaderLabel">Offcanvas Header</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content with a header in the offcanvas.
    </div>
</div>

Explanation: Use .offcanvas-header and .offcanvas-title for titles and header elements in the offcanvas.

Offcanvas Positioning

Position the offcanvas using directional classes like .offcanvas-start, .offcanvas-end, .offcanvas-top, or .offcanvas-bottom.

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

Explanation: Use directional classes to control the position of the offcanvas element on the screen.

Complete Offcanvas Example

Below is a complete example demonstrating different types of offcanvas with headers and positioning.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Offcanvas Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Offcanvas</h2>
        <!-- Trigger Buttons -->
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Left Offcanvas</button>
        <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithHeader">Right Offcanvas with Header</button>
        <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom">Bottom Offcanvas</button>

        <!-- Offcanvas Elements Here -->
        <!-- Left, Right, and Bottom Offcanvas Code as Demonstrated Above -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates multiple offcanvas configurations, including headers and various positions.

Key Takeaways

  • Enable offcanvas with .offcanvas and a trigger button using data-bs-toggle="offcanvas".
  • Include headers with .offcanvas-header and titles with .offcanvas-title.
  • Position the offcanvas using classes like .offcanvas-start, .offcanvas-end, or .offcanvas-bottom.
Prev Next