Offcanvas - Bootstrap Design System

Offcanvas Placement

Start (Left)

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

<button class="btn btn-primary" type="button"
        data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasStart">
    Toggle Start Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas Start</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content here...
    </div>
</div>

End (Right)

This offcanvas slides in from the right side of the screen.

<button class="btn btn-primary" type="button"
        data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasEnd">
    Toggle End Offcanvas
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas End</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content here...
    </div>
</div>

Top

This offcanvas slides in from the top of the screen.

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas Top</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content here...
    </div>
</div>

Bottom

This offcanvas slides in from the bottom of the screen.

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas Bottom</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content here...
    </div>
</div>

Backdrop Options

Static Backdrop

When backdrop is set to static, the offcanvas will not close when clicking outside of it.

This offcanvas has a static backdrop. Click the close button or press Escape to close.

<div class="offcanvas offcanvas-start"
     data-bs-backdrop="static"
     tabindex="-1" id="offcanvasStatic">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Static Backdrop</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content here...
    </div>
</div>

Body Scrolling

Scrolling the body element is disabled when an offcanvas is visible. Use the data-bs-scroll attribute to enable body scrolling.

Try scrolling the rest of the page to see this option in action.

This offcanvas allows body scrolling and has no backdrop.

Try scrolling the rest of the page to see this option in action.

This offcanvas allows body scrolling and has a backdrop.

<!-- Enable scrolling, disable backdrop -->
<div class="offcanvas offcanvas-start"
     data-bs-scroll="true"
     data-bs-backdrop="false"
     tabindex="-1" id="offcanvasScrolling">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Body Scrolling</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content here...
    </div>
</div>

<!-- Enable scrolling with backdrop -->
<div class="offcanvas offcanvas-start"
     data-bs-scroll="true"
     tabindex="-1" id="offcanvasScrollingBackdrop">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Scrolling with Backdrop</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Content here...
    </div>
</div>