<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
h1
class
=
"m-4 text-success"
>GeeksforGeeks</
h1
>
<
h4
class
=
"ms-4"
>Bootstrap 5 Offcanvas Live demo</
h4
>
<
div
class
=
"container mt-4"
>
<
button
class
=
"btn btn-success mb-3"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasWithBothOptions"
>
Offcanvas with body scrolling and backdrop
<
br
>
</
button
>
<
p
>
Bootstrap 5 Offcanvas is a sidebar component that enables Javascript to swap
the view so that it may be seen from the top, bottom, or left edge of the
viewport. The button, which is declared with the particular element, may be
used as the trigger to switch the view, and the data attribute can be used
to use it to call JavaScript. It is comparable to the Bootstrap Modal in that
only one off-canvas element may be shown at once. Offcanvas functionality
may be used to navigate the entire page. Offcanvas Backdrop is the greyish
translucent cover that is all over the background which is shown when the
offcanvas opens. There are three settings in which we can use an offcanvas,
the default one is the offcanvas with the backdrop and no body scrolling.
The two others are the one with the body scrolling and no backdrop and the
one with both body scrolling and backdrop. For the second version we have
to add data-bs-scroll="true" data-bs-backdrop="false" attributes in the
offcanvas and for the last one we have to add the data-bs-scroll="true"
attribute in the offcanvas.
</
p
>
</
div
>
<
div
class
=
"offcanvas offcanvas-start bg-dark text-light"
data-bs-scroll
=
"true"
id
=
"offcanvasWithBothOptions"
>
<
div
class
=
"offcanvas-header"
>
<
h5
class
=
"offcanvas-title"
id
=
"offcanvasScrollingLabel"
>
This is the offcanvas with body scrolling and backdrop</
h5
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
img
src
=
<
button
type
=
"button"
class
=
"btn-success"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
Close
</
button
>
</
div
>
</
div
>
</
body
>
</
html
>