Offcanvas Side Panels

Codebase’s offcanvas side panels can slide in from the right of the left; they can be dismissed by a close button and/or by clicking outside; and they can become like a normal on-canvas panel above a breakpoint of your choice.

Example 1: Simple offcanvas

This first example has an offcanvas panel at all viewport widths.

← Offcanvas demo 1 — clicking this button will open a demo offcanvas panel to the left.

<button
  class="offcanvas-control btn btn-primary"
  aria-controls="offcanvas-1"
  aria-expanded="false"
  data-control="toggle"
  data-click-away="true"
  data-scroll-lock="true">
  &larr; Offcanvas demo 1
</button> – offcanvas panel will slide in from the left

<div class="offcanvas-wrapper">
  <div class="offcanvas-panel offcanvas-panel-all offcanvas-panel-left bg-color-secondary-alt bs p-3" id="offcanvas-1">
    <div class="mb-3 t-right clearfix">
      <button
        class="offcanvas-close btn btn-secondary float-right">
        Close
      </button>
    </div>

    <p>Here is some text on the offcanvas panel.</p>
  </div>
</div>

Example 2: Responsive Offcanvas Panels

Let’s add two more things:

1. Using some Codebase CSS classes, the trigger button can be hidden above a breakpoint (e.g. for large screens up), and the offcanvas panel can become like a normal on-canvas element. You could use this for creating a sidebar that only operates as an offcanvas sidebar on small tablets and phones.

2. As the viewport width expands through or contracts through your chosen breakpoint (in this example, medium = 1024px (default)) you will want the offcanvas component to deactivate, so that the page layout is not messed up e.g. when rotating an tablet or large phone between landscape and portrait orientation.

Note: Codebase responsive offcanvas panels also have a box-shadow removal override that kicks in when the panel is being displayed like a normal on-canvas panel. So, .bs utility classes won’t work on a responsive offcanvas panels above its breakpoint.

Offcanvas demo 2 → – offcanvas panel will slide in from the right

<button
  class="btn btn-primary offcanvas-control hide-md-up"
  aria-controls="offcanvas-2"
  aria-expanded="false"
  data-control="toggle"
  data-click-away="true"
  data-scroll-lock="true">
  Offcanvas demo 2 &rarr;
</button>

<div class="offcanvas-wrapper">
  <div class="offcanvas-panel offcanvas-panel-below-md offcanvas-panel-right bg-color-secondary t-color-ui-text p-3 bs" id="offcanvas-2">
    <div class="mb-3 hide-md-up">
      <button
        class="offcanvas-close btn btn-secondary b-color-ui-text">
        Close
      </button>
    </div>
    <p>This is an offcanvas panel that becomes a normal panel above the breakpoint for medium viewports (default 1024px).</p>
    <p>Your browser window will need to be narrower than 1024px so that you can see this example in operation. Also, if you can open the offcanvas sidebar and then adjust your browser width, you’ll see that the panel is automatically dismissed.</p>
  </div>
</div>

Offcanvas Panel Options

The example above has CSS classes...

offcanvas-panel offcanvas-panel-right offcanvas-panel-below-md

...to make the offcanvas panel slide in from the right, and only operate as an offcanvas panel on smaller screens below the md breakpoint width (i.e. up to 1023px, or anything narrower than an iPad in landscape orientation).