Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 5 Offcanvas


Offcanvas

Offcanvas is similar to modals (hidden by default and shown when activated), except that is often used as a sidebar navigation menu.

Heading

Some text lorem ipsum.

Some text lorem ipsum.


How To Create an Offcanvas Sidebar

The following example shows how to create an offcanvas sidebar:

Example

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Open Offcanvas Sidebar
</button>
Try it Yourself »

Example Explained

The .offcanvas class creates the offcanvas sidebar.

The .offcanvas-start class positions the offcanvas, and makes it 400px wide. See examples below for more positioning classes.

The .offcanvas-title class ensures proper margins and line-height.

Then, add your content inside the .offcanvas-body class.

To open the offcanvas sidebar, you must use a <button> or an <a> element that points to the id of the .offcanvas container (#demo in our example).

To open the offcanvas sidebar with an <a> element, you can point to #demo with the href attribute, instead of data-bs-target attribute.



Offcanvas Position

Use the .offcanvas-start|end|top|bottom to position the offcanvas to the left, right, top or bottom:

Right Example

<div class="offcanvas offcanvas-end" id="demo">

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

Top Example

<div class="offcanvas offcanvas-top" id="demo">

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

Bottom Example

<div class="offcanvas offcanvas-bottom" id="demo">

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

Responsive OffCanvas Menu

You can also control when you want to hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes:

Example

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
Try it Yourself »

Dark OffCanvas Menu

Use the .text-bg-dark class to create a dark offcanvas menu.

Tip: We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:

Example

<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Try it Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.