1. Components
2. UI Elements
3. Off-Canvas

Off-Canvas

Documentation and examples of off-canvas sidebar that slides in and out of the screen, which is mostly used as mobile navigations.

---

Basic Example

You can put any element to off-canvas sidebar like in the example below.

<div class="off-canvas">
  <!-- any content goes here -->
</div>
<div class="off-canvas-pusher">
  <a href="#offCanvasMenu" class="btn btn-secondary off-canvas-menu">Menu</a>
</div>

$('.off-canvas-menu').on('click', function(e){
  e.preventDefault();
  var target = $(this).attr('href');
  $(target).addClass('show');
});

---

With Overlay

You can enable overlay by adding class .off-canvas-overlay to .off-canvas.

<div class="off-canvas off-canvas-overlay">
  <!-- any content goes here -->
</div>

---

Flip to Right

You can flip the sidebar to display in right instead of left by adding class .off-canvas-right to .off-canvas.

<div class="off-canvas off-canvas-overlay off-canvas-right">
  <!-- any content goes here -->
</div>

---

Nav in Off-Canvas

An off-canvas can have a navigation added.

<div class="off-canvas off-canvas-overlay">
  <div class="off-canvas-header">...</div>
  <div class="off-canvas-body">
    <ul class="nav sidebar-nav">...</ul>
  </div>
</div>

---

Color & Background

An off-canvas can have a different background and color by adding some classes.

<div class="off-canvas off-canvas-overlay off-canvas-dark bg-primary">...</div>
<div class="off-canvas off-canvas-overlay off-canvas-dark bg-secondary">...</div>
<div class="off-canvas off-canvas-overlay off-canvas-dark">...</div>

---

Transition Effect

An off-canvas can change to different transition effect.

<div class="off-canvas">...</div>
<div class="off-canvas off-canvas-reveal">...</div>
<div class="off-canvas off-canvas-push">...</div>