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.

More important, however, is to understand the way any offcanvas panel can be built using AlpineJS.

Example 1: Simple offcanvas

This first example has an offcanvas panel at all viewport widths. The toggler (open/close) button is in a separate Alpine component to the offcanvas panel itself.

The Codebase AlpineJS offcanvas works in a similar way to the modal control button as a separate component example: the toggler button is a separate Alpine component that “talks” to the offcanvas panel component using a communication event bus (see https://codewithhugo.com/alpinejs-component-communication-event-bus/).

<!-- The button component -->
<div x-data="{}" class="mb-3">
  <button class="btn btn-primary scroll-lock" @click="$dispatch('offcanvas-ex')">Offcanvas example 1</button> – opens a demo offcanvas panel to the left
</div>

<!-- The offcanvas component -->
<div x-data="{ offcanvas: false }">
  <div
    class="offcanvas-wrapper"
    :class="{ 'active': offcanvas }"
    x-on:offcanvas-ex.window="offcanvas = !offcanvas"
    >
    <div class="backdrop scroll-unlock" x-show="offcanvas" @click="offcanvas = false"></div>
    <div class="offcanvas-panel offcanvas-panel-all offcanvas-panel-left bg-color-primary t-color-ui-text bs p-2" :class="{ 'active': offcanvas }">
      <div class="flex flex-end mb-3">
        <button class="btn btn-sm btn-primary btn-icon rounded-full" @click="offcanvas = false">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
      </div>
      <p>This offcanvas panel is toggled from a separate button component outside. It is also closed by the closure button and the invisible dismisser backdrop.</p>
    </div>
  </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 threshold (e.g. for medium 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 Alpine 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.

<!-- The button component (separate) -->
<div x-data="{}" class="mb-3 hide-md-up">
  <button class="btn btn-secondary scroll-lock" @click="$dispatch('offcanvas2-ex')">Offcanvas example 2</button> – opens a demo offcanvas panel to the right
</div>

<!-- The offcanvas component (without button) -->
<div x-data="{ offcanvas: false }">
  <div
    class="offcanvas-wrapper"
    :class="{ 'active': offcanvas }"
    x-on:offcanvas2-ex.window="offcanvas = !offcanvas"
    >
    <div class="backdrop scroll-unlock" x-show="offcanvas" @click="offcanvas = false"></div>
    <div class="offcanvas-panel offcanvas-panel-right offcanvas-panel-below-md mb-3 bs p-2 bg-color-secondary t-color-ui-text " :class="{ 'active': offcanvas }">
      <div class="mb-3 hide-md-up">
        <button class="btn btn-sm btn-secondary btn-icon rounded-full" @click="offcanvas = false">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </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>
</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).

Example 3: Super-Complex Offcanvas

As a further development of example 2, you may want the trigger button to do a double duty, so that it is not hidden for large screens up but has a different operation: to slide the (now on-canvas) sidebar away so that your main content can take up the full width of the viewport. E.g. as per these docs, and as you’ve no doubt seen on Google News, and YouTube.

Examine the code for the sidebar/offcanvas sidebar of these docs, to see how I did it here using Alpine.