Bootstrap Offcanvas

Offcanvas is a Bootstrap component that displays content outside the visible area of the page and slides it into view when activated.

It is useful for:

• Mobile navigation menus.
• Website sidebars.
• Filter panels.
• Settings panels.
• User account menus.
• Additional page content.

A basic Offcanvas contains a trigger button and an Offcanvas element.

<button
class="btn btn-primary"
data-bs-toggle="offcanvas"
data-bs-target="#myOffcanvas">

    Open Menu

</button>


<div
class="offcanvas offcanvas-start"
id="myOffcanvas">

    Content

</div>

The .offcanvas class creates the main Offcanvas component.

<div
class="offcanvas"
id="menu">

    Offcanvas Content

</div>

The Offcanvas is normally combined with a placement class such as .offcanvas-start.

The .offcanvas-start class makes the Offcanvas appear from the left side in a left-to-right layout.

<div
class="offcanvas offcanvas-start"
id="startMenu">

    <div class="offcanvas-body">

        Left Side Menu

    </div>

</div>

The .offcanvas-end class displays the Offcanvas from the right side in a left-to-right layout.

<div
class="offcanvas offcanvas-end"
id="endMenu">

    <div class="offcanvas-body">

        Right Side Menu

    </div>

</div>

The .offcanvas-top class makes the Offcanvas slide down from the top.

<div
class="offcanvas offcanvas-top"
id="topMenu">

    <div class="offcanvas-body">

        Top Content

    </div>

</div>

The .offcanvas-bottom class makes the Offcanvas slide up from the bottom.

<div
class="offcanvas offcanvas-bottom"
id="bottomMenu">

    <div class="offcanvas-body">

        Bottom Content

    </div>

</div>

The .offcanvas-header class is used to create the header area of an Offcanvas.

<div
class="offcanvas offcanvas-start"
id="menu">

    <div class="offcanvas-header">

        <h5 class="offcanvas-title">

            My Menu

        </h5>

    </div>

</div>

The .offcanvas-title class is commonly used for the title inside the Offcanvas header.

<div class="offcanvas-header">

    <h5 class="offcanvas-title">

        Navigation

    </h5>

</div>

The .offcanvas-body class contains the main content of the Offcanvas.

<div class="offcanvas-body">

    <p>
    Welcome to our website.
    </p>

    <a href="#">
    Home
    </a>

</div>

The .btn-close class can be used to create a close button.

<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close">

</button>

The data-bs-dismiss="offcanvas" attribute tells Bootstrap to close the current Offcanvas.

A button can open an Offcanvas using data-bs-toggle="offcanvas".

<button
class="btn btn-primary"
data-bs-toggle="offcanvas"
data-bs-target="#myMenu"
type="button">

    Open Menu

</button>


<div
class="offcanvas offcanvas-start"
id="myMenu">

    <div class="offcanvas-body">

        Menu Content

    </div>

</div>

A link can also be used as an Offcanvas trigger.

<a
href="#myPanel"
class="btn btn-success"
data-bs-toggle="offcanvas"
role="button"
aria-controls="myPanel">

    Open Panel

</a>


<div
class="offcanvas offcanvas-end"
id="myPanel">

    <div class="offcanvas-body">

        Panel Content

    </div>

</div>

The aria-controls attribute identifies the Offcanvas element controlled by the trigger.

<button
data-bs-toggle="offcanvas"
data-bs-target="#menu"
aria-controls="menu">

    Open Menu

</button>

The value should match the ID of the Offcanvas element.

The aria-labelledby attribute can connect the Offcanvas to its visible title.

<div
class="offcanvas offcanvas-start"
id="menu"
aria-labelledby="menuTitle">

    <div class="offcanvas-header">

        <h5
        class="offcanvas-title"
        id="menuTitle">

            Main Menu

        </h5>

    </div>

</div>

This relationship provides useful information to assistive technologies.

When an Offcanvas is open, Bootstrap normally displays a backdrop behind it.

The backdrop visually separates the Offcanvas from the main page and helps indicate that the Offcanvas is currently active.

<div
class="offcanvas offcanvas-start"
id="menu"
data-bs-backdrop="true">

    Menu Content

</div>

The backdrop can be disabled using data-bs-backdrop="false".

<div
class="offcanvas offcanvas-start"
id="menu"
data-bs-backdrop="false">

    Content

</div>

This allows the page behind the Offcanvas to remain visually unchanged.

A static backdrop can be configured so that clicking the backdrop does not close the Offcanvas.

<div
class="offcanvas offcanvas-start"
id="menu"
data-bs-backdrop="static">

    Important Content

</div>

The exact behavior should be chosen according to the purpose of the panel and the user experience required.

The data-bs-scroll option can allow the main page to remain scrollable while the Offcanvas is open.

<div
class="offcanvas offcanvas-start"
id="menu"
data-bs-scroll="true">

    Long Content

</div>

This can be useful when the Offcanvas contains navigation or controls while users still need to interact with the page behind it.

Bootstrap also allows scroll behavior and the backdrop to be configured together.

<div
class="offcanvas offcanvas-start"
id="menu"
data-bs-scroll="true"
data-bs-backdrop="false">

    Menu Content

</div>

This combination can be useful for specific application layouts.

One of the most common uses of Offcanvas is a navigation menu.

<div
class="offcanvas offcanvas-start"
id="navMenu">

    <div class="offcanvas-header">

        <h5 class="offcanvas-title">

            Navigation

        </h5>

        <button
        type="button"
        class="btn-close"
        data-bs-dismiss="offcanvas">

        </button>

    </div>


    <div class="offcanvas-body">

        <ul class="list-group">

            <li class="list-group-item">
                Home
            </li>

            <li class="list-group-item">
                Courses
            </li>

            <li class="list-group-item">
                Contact
            </li>

        </ul>

    </div>

</div>

Offcanvas is useful for displaying filters on shopping, library, or search pages.

<div
class="offcanvas offcanvas-end"
id="filterPanel">

    <div class="offcanvas-header">

        <h5 class="offcanvas-title">

            Filters

        </h5>

    </div>


    <div class="offcanvas-body">

        <label class="form-label">
        Category
        </label>

        <select class="form-select">

            <option>
            All
            </option>

            <option>
            Courses
            </option>

            <option>
            Books
            </option>

        </select>

    </div>

</div>

An Offcanvas can also be used as a user account panel.

Offcanvas can also be controlled through the Bootstrap JavaScript API.

const element =
document.getElementById(
'myOffcanvas'
);

const offcanvas =
new bootstrap.Offcanvas(
element
);

offcanvas.show();

The show() method opens the Offcanvas.

Bootstrap Offcanvas provides several JavaScript methods.

• show() – opens the Offcanvas.
• hide() – closes the Offcanvas.
• toggle() – switches between open and closed states.

const offcanvas =
new bootstrap.Offcanvas(
element
);

offcanvas.show();

offcanvas.hide();

offcanvas.toggle();

Bootstrap Offcanvas provides events that can be used to execute JavaScript when its state changes.

• show.bs.offcanvas
• shown.bs.offcanvas
• hide.bs.offcanvas
• hidden.bs.offcanvas

const menu =
document.getElementById(
'myOffcanvas'
);

menu.addEventListener(
'shown.bs.offcanvas',
function(){

    console.log(
    'Offcanvas opened'
    );

});

Accessibility is important when using Offcanvas because it changes the visible interface and can move focus.

• Use a meaningful title.
• Use aria-labelledby when appropriate.
• Provide a clear close button.
• Use meaningful text for navigation links.
• Make sure keyboard users can operate the component.
• Do not make important content inaccessible without a clear control.

<div
class="offcanvas offcanvas-start"
id="accessibleMenu"
aria-labelledby="menuTitle">

    <div class="offcanvas-header">

        <h5
        class="offcanvas-title"
        id="menuTitle">

            Main Menu

        </h5>

    </div>

</div>

Avoid these common mistakes:

• Forgetting data-bs-toggle="offcanvas".
• Using the wrong data-bs-target.
• Using duplicate IDs.
• Forgetting the Bootstrap JavaScript bundle.
• Forgetting a close button.
• Using the wrong Offcanvas placement class.
• Adding too much content without considering usability.
• Using unclear navigation labels.
• Ignoring keyboard and accessibility requirements.

The following example creates a practical sidebar with navigation links.

This complete example combines a trigger button, Offcanvas header, navigation links, close button, and accessibility attributes.

<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#completeMenu"
aria-controls="completeMenu">

    Open Menu

</button>


<div
class="offcanvas offcanvas-start"
id="completeMenu"
aria-labelledby="completeMenuTitle">


    <div class="offcanvas-header">

        <h5
        class="offcanvas-title"
        id="completeMenuTitle">

            Website Menu

        </h5>


        <button
        type="button"
        class="btn-close"
        data-bs-dismiss="offcanvas"
        aria-label="Close">

        </button>

    </div>


    <div class="offcanvas-body">

        <ul class="list-group">

            <li class="list-group-item">
                <a href="#">Home</a>
            </li>

            <li class="list-group-item">
                <a href="#">Courses</a>
            </li>

            <li class="list-group-item">
                <a href="#">Tutorials</a>
            </li>

            <li class="list-group-item">
                <a href="#">Contact</a>
            </li>

        </ul>

    </div>

</div>