Offcanvas
.sometext
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eos doloremque, deserunt quia reprehenderit rerum veniam rem deleniti ea? Possimus natus eaque magnam illum reprehenderit, sequi et quisquam hic quasi est vel accusamus ab quos, quis libero aspernatur? Aliquam, optio officia recusandae eos dolorum enim praesentium quo suscipit aspernatur debitis fugit facere dignissimos odio autem nobis, corrupti nostrum animi, quis eum quam voluptate omnis qui rerum. Commodi nemo, totam sequi itaque delectus ullam nisi sint debitis sed rem eum, rerum dolore deleniti voluptas. Maxime praesentium minima quibusdam hic, molestiae dignissimos aut debitis, omnis a, repellendus voluptatum unde ex quod. Corrupti sunt ratione asperiores placeat est distinctio quisquam iure vero doloribus qui optio sint, sapiente aperiam natus magnam eum molestiae perspiciatis id mollitia harum delectus recusandae in. Delectus aspernatur perferendis provident aliquid quidem neque? Earum rerum dignissimos beatae cupiditate! Aliquid quam quod adipisci laboriosam, vitae consequatur ea ab! Aliquid deleniti possimus quod minus. Corporis nulla reiciendis mollitia minus. Possimus nostrum expedita nam nisi quas qui cum nihil tenetur voluptate laboriosam quos id suscipit quibusdam, obcaecati assumenda beatae ipsam nemo fugiat mollitia fugit vel, unde perspiciatis saepe deserunt. Eos deleniti dolores odit molestiae animi, aspernatur libero deserunt ab totam iste fugiat vero nesciunt. Magni odio temporibus veritatis, numquam dolorem itaque quod in explicabo voluptas doloribus quibusdam nulla reiciendis ipsum deleniti quas dolorum architecto cum, beatae voluptates quisquam veniam harum. Unde cum veritatis saepe tenetur eius molestiae blanditiis neque optio explicabo sequi ipsa placeat non beatae nisi quisquam delectus, cupiditate, perspiciatis sit, ab esse facere molestias culpa? Iste cumque autem, tempora sapiente quidem dignissimos natus est adipisci, quisquam eum dolorem esse, amet omnis itaque ab eveniet! Nam veritatis reprehenderit labore. Excepturi a quos consequuntur deserunt eveniet, consequatur incidunt voluptas accusamus facilis. Sit earum, nemo incidunt inventore maxime debitis temporibus distinctio dignissimos, quas nesciunt fuga consequuntur harum error sint unde labore quo quaerat. Cum tempora adipisci nemo voluptatum quae delectus incidunt consectetur aliquam quo, libero dolore nam rerum natus tempore quia maiores perspiciatis esse, quisquam saepe enim distinctio. Possimus harum dolor quas dicta iure laudantium tenetur itaque ullam esse. Amet laudantium ea sit, excepturi magni in quae repellendus provident exercitationem laboriosam pariatur quas veniam ad aut distinctio dolores ex tenetur corrupti facere molestiae dolorum consequuntur! Corporis quibusdam dolorum pariatur sunt mollitia officiis molestias modi eligendi eius. Quasi minima iste reiciendis deserunt sunt dicta non maiores adipisci laudantium nobis nesciunt, vero iusto expedita eum itaque quas molestiae? Odio consequuntur accusamus ea ipsa non numquam voluptatem molestiae, expedita deleniti quae reprehenderit. Incidunt autem nam voluptas natus, rem a architecto non odit, unde totam nesciunt animi dignissimos dolorum fugit eos molestiae explicabo similique laborum sequi aliquid, porro ad at repellendus. Voluptatibus impedit exercitationem sed quasi dolorum! Nam, voluptatum. Alias possimus id totam illo excepturi voluptatibus facere sint, repudiandae et in. Ducimus ut optio libero explicabo obcaecati? Vitae delectus numquam accusantium repellat nemo quo velit ut nobis voluptas? Ut, unde? Culpa doloribus a harum reprehenderit esse non modi accusantium architecto recusandae. Harum minus eum sapiente odit, quidem vitae?
Link with hrefOffcanvas
Note
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) -
shows content.offcanvas.show
You 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.
Placement
There’s no default placement for offcanvas components, so you must add one of the modifier classes below;
-
.offcanvas-startplaces offcanvas on the left of the viewport (shown above) -
.offcanvas-endplaces offcanvas on the right of the viewport -
.offcanvas-topplaces offcanvas on the top of the viewport -
.offcanvas-bottomplaces offcanvas on the bottom of the viewport
Offcanvas [bottom]
.offcanvas-bottom
Offcanvas bottom
Offcanvas
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" 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>
Offcanvas [top]
.offcanvas-top
Offcanvas top
Colored with scrolling
Try scrolling the rest of the page to see this option in action.
Offcanvas with backdrop
.....
Backdroped with scrolling
Try scrolling the rest of the page to see this option in action.