Bootstrap 5 Offcanvas

Key Offcanvas Features

🔹 Basic Offcanvas Structure

Offcanvas triggers use standard button elements with specific data attributes to control the sliding panel behavior. The data-bs-toggle="offcanvas" attribute initiates the interaction, while data-bs-target points to the offcanvas element's ID. When activated, the panel smoothly animates into view from the specified edge of the viewport. The close button within the offcanvas header includes data-bs-dismiss="offcanvas" to enable dismissal. This consistent interaction pattern creates intuitive user experiences across different implementations. Offcanvas components reduce page clutter by hiding secondary content until needed, improving focus on primary content and potentially increasing engagement with core page elements.

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

<!-- Offcanvas Panel -->
<div class="offcanvas offcanvas-start" 
     tabindex="-1" 
     id="offcanvasExample">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas Title</h5>
        <button type="button" 
                class="btn-close" 
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <p>This is the offcanvas content.</p>
        <button class="btn btn-secondary">Action Button</button>
    </div>
</div>

🔹 Offcanvas Placement

Offcanvas placement controls which edge of the viewport the panel slides from, using classes like .offcanvas-start (left), .offcanvas-end (right), .offcanvas-top, or .offcanvas-bottom. Left and right placements work best for navigation menus, filters, or settings panels. Top placement is ideal for notifications or search bars, while bottom placement suits mobile navigation or action sheets. Choose placement based on content type, user expectations, and device considerations. Responsive placement strategies can adapt to different screen sizes for optimal usability. Strategic placement improves user experience by aligning with mental models for where certain types of content should appear.

<!-- Left Side (Start) -->
<div class="offcanvas offcanvas-start" id="offcanvasLeft">
    <div class="offcanvas-header">
        <h5>Left Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Left side content</div>
</div>

<!-- Right Side (End) -->
<div class="offcanvas offcanvas-end" id="offcanvasRight">
    <div class="offcanvas-header">
        <h5>Right Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Right side content</div>
</div>

<!-- Top -->
<div class="offcanvas offcanvas-top" id="offcanvasTop">
    <div class="offcanvas-header">
        <h5>Top Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Top content</div>
</div>

<!-- Bottom -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom">
    <div class="offcanvas-header">
        <h5>Bottom Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Bottom content</div>
</div>

🔹 Offcanvas with Navigation

Offcanvas navigation creates mobile-friendly menus that slide in from the edge, perfect for responsive websites. This pattern hides primary navigation on smaller screens while providing easy access through a hamburger menu trigger. Include all necessary navigation elements: links, dropdowns, search bars, user account controls, and any other navigation components. Offcanvas navigation reduces visual clutter on mobile viewports while keeping navigation accessible with a single tap. Implement proper focus management and keyboard navigation for accessibility. This approach significantly improves mobile user experience, which directly impacts SEO rankings as Google prioritizes mobile-friendly sites in mobile search results.

<!-- Navbar with Offcanvas Toggle -->
<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">My Website</a>
        <button class="navbar-toggler" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

<!-- Offcanvas Navigation -->
<div class="offcanvas offcanvas-end" id="offcanvasNavbar">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>

🔹 Offcanvas with Backdrop Options

Backdrop variations serve specific interface purposes based on the offcanvas content's relationship to the main page. A dark backdrop ("true") creates modal-like focus for important actions like checkouts or forms. No backdrop ("false") works for reference panels where users need to see underlying content, like color pickers or measurement tools. Static backdrops force engagement with critical content like consent forms or error messages. Choosing the appropriate backdrop behavior enhances user experience by providing clear contextual cues about the offcanvas's purpose and interaction model. This clarity improves task efficiency and reduces user errors, contributing to better engagement metrics.

<!-- With Backdrop (Default) -->
<div class="offcanvas offcanvas-start" 
     data-bs-backdrop="true" 
     id="offcanvasBackdrop">
    <div class="offcanvas-body">
        Click outside to close
    </div>
</div>

<!-- No Backdrop -->
<div class="offcanvas offcanvas-start" 
     data-bs-backdrop="false" 
     id="offcanvasNoBackdrop">
    <div class="offcanvas-body">
        No backdrop overlay
    </div>
</div>

<!-- Static Backdrop -->
<div class="offcanvas offcanvas-start" 
     data-bs-backdrop="static" 
     id="offcanvasStatic">
    <div class="offcanvas-body">
        Must use close button
    </div>
</div>

🔹 Offcanvas with Scrolling

Scrollable offcanvas implementations maintain the panel's visibility while allowing interaction with the underlying page content. This approach is particularly useful for e-commerce sites where users might reference a shopping cart while continuing to browse products, or for documentation sites where a table of contents remains visible while reading content. The offcanvas stays fixed in position while the main page scrolls independently. This pattern reduces cognitive load by eliminating the need to repeatedly open and close the offcanvas when referring to its contents. Improved task efficiency and reduced interaction friction contribute to better user engagement metrics that can positively influence SEO performance.

<div class="offcanvas offcanvas-start" 
     data-bs-scroll="true" 
     data-bs-backdrop="false" 
     id="offcanvasScroll">
    <div class="offcanvas-header">
        <h5>Scrollable Page</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <p>You can scroll the page while this is open.</p>
    </div>
</div>