LeptonX uses
Bootstrap Offcanvas's component's latest version.
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show
class on an element with the .offcanvas
class.
.offcanvas
hides content (default).offcanvas.show
shows contentYou can use a link with the href
attribute, or a button with the data-bs-target
attribute. In both cases, the data-bs-toggle="offcanvas"
is required.
<a
class="btn btn-primary mb-1"
data-bs-toggle="offcanvas"
href="#offcanvasExample"
role="button"
aria-controls="offcanvasExample"
>
Link with href
</a>
<button
class="btn btn-primary mb-1"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample"
>
Button with data-bs-target
</button>
<div
class="offcanvas offcanvas-start"
tabindex="-1"
id="offcanvasExample"
aria-labelledby="offcanvasExampleLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have
chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
>
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
There’s no default placement for offcanvas components, so you must add one of the modifier classes below;
.offcanvas-start
places offcanvas on the left of the viewport (shown above).offcanvas-end
places offcanvas on the right of the viewport.offcanvas-top
places offcanvas on the top of the viewport.offcanvas-bottom
places offcanvas on the bottom of the viewportTry the top, right, and bottom examples out below.
<button
class="btn btn-primary mb-1"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasTop"
aria-controls="offcanvasTop"
>
Toggle top offcanvas
</button>
<div
class="offcanvas offcanvas-top"
tabindex="-1"
id="offcanvasTop"
aria-labelledby="offcanvasTopLabel"
>
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<button
class="btn btn-primary mb-1"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasRight"
aria-controls="offcanvasRight"
>
Toggle right offcanvas
</button>
<div
class="offcanvas offcanvas-end"
tabindex="-1"
id="offcanvasRight"
aria-labelledby="offcanvasRightLabel"
>
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasBottom"
aria-controls="offcanvasBottom"
>
Toggle bottom offcanvas
</button>
<div
class="offcanvas offcanvas-bottom"
tabindex="-1"
id="offcanvasBottom"
aria-labelledby="offcanvasBottomLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body small">...</div>
</div>
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.
Try scrolling the rest of the page to see this option in action.
.....
Try scrolling the rest of the page to see this option in action.
<button
class="btn btn-primary mb-1"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasScrolling"
aria-controls="offcanvasScrolling"
>
Enable body scrolling
</button>
<button
class="btn btn-primary mb-1"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasWithBackdrop"
aria-controls="offcanvasWithBackdrop"
>
Enable backdrop (default)
</button>
<button
class="btn btn-primary mb-1"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasWithBothOptions"
aria-controls="offcanvasWithBothOptions"
>
Enable both scrolling & backdrop
</button>
<div
class="offcanvas offcanvas-start"
data-bs-scroll="true"
data-bs-backdrop="false"
tabindex="-1"
id="offcanvasScrolling"
aria-labelledby="offcanvasScrollingLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">
Colored with scrolling
</h5>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div
class="offcanvas offcanvas-start"
tabindex="-1"
id="offcanvasWithBackdrop"
aria-labelledby="offcanvasWithBackdropLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">
Offcanvas with backdrop
</h5>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div
class="offcanvas offcanvas-start"
data-bs-scroll="true"
tabindex="-1"
id="offcanvasWithBothOptions"
aria-labelledby="offcanvasWithBothOptionsLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
Backdroped with scrolling
</h5>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>