Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or
bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you
toggle, and data attributes are used to invoke our JavaScript.
Read the official
Bootstrap Documentation for a full list of
instructions and other options.
Thereās no default placement for offcanvas components, so you must add one of the modifier classes.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
<!-- Start Offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">Toggle Start</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h5 id="offcanvasStartLabel" class="offcanvas-title">Offcanvas Start</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
<!-- End Offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">Toggle End</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
<div class="offcanvas-header">
<h5 id="offcanvasEndLabel" class="offcanvas-title">Offcanvas End</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
<!-- Top Offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle Top</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel" class="offcanvas-title">Offcanvas Top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary me-3">Continue</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
<!-- Bottom Offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle Bottom</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBottomLabel" class="offcanvas-title">Offcanvas Bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary me-3">Continue</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>| ClassName | Description |
|---|---|
.offcanvas-start
|
To places offcanvas on the left of the viewport |
.offcanvas-end
|
To places offcanvas on the right of the viewport |
.offcanvas-top
|
To places offcanvas on the top of the viewport |
.offcanvas-bottom
|
To places offcanvas on the bottom of the viewport |
Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible.
Use the data-bs-scroll attribute to toggle <body> scrolling and
data-bs-backdrop to toggle the backdrop.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
<!-- Enable Body scrolling -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScroll" aria-controls="offcanvasScroll">Enable Body Scrolling</button>
<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScroll" aria-labelledby="offcanvasScrollLabel">
<div class="offcanvas-header">
<h5 id="offcanvasScrollLabel" class="offcanvas-title">Offcanvas Scroll</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
<!-- Enable Backdrop -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBackdrop" aria-controls="offcanvasBackdrop">Enable backdrop</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasBackdrop" aria-labelledby="offcanvasBackdropLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBackdropLabel" class="offcanvas-title">Enable backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
<!-- Enable both scrolling & backdrop -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBoth" aria-controls="offcanvasBoth">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasBoth" aria-labelledby="offcanvasBothLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBothLabel" class="offcanvas-title">Enable both scrolling & backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
Enable the dark theme for the offcanvas component by adding the data-bs-theme="dark" attribute
to its parent element.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
<div data-bs-theme="dark">
<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasDark"
aria-controls="offcanvasDark">
Toggle Dark offcanvas
</button>
<div
class="offcanvas offcanvas-start"
tabindex="-1"
id="offcanvasDark"
aria-labelledby="offcanvasDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or
web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to
have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">
Cancel
</button>
</div>
</div>
</div>
To enable the offcanvas component to toggle at a specific breakpoint, use one of the following classes:
.offcanvas-sm, .offcanvas-md, .offcanvas-lg,
.offcanvas-xl or .offcanvas-xxl. Each class corresponds to a different breakpoint
size, allowing you to control when the offcanvas should be activated.
xl breakpoint to show the responsive offcanvas toggle.
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
<button
class="btn btn-primary d-xl-none"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasResponsive"
aria-controls="offcanvasResponsive">
Toggle offcanvas-xl
</button>
<div class="alert alert-info d-xl-block d-none mt-4">
Resize your browser to <code>xl</code> breakpoint to show the responsive offcanvas toggle.
</div>
<div
class="offcanvas offcanvas-start offcanvas-xl"
tabindex="-1"
id="offcanvasResponsive"
aria-labelledby="offcanvasResponsiveLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print,
graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century
who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a
type specimen book.
</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">
Cancel
</button>
</div>
</div>