Offcanvas Side Panels

Codebase offcanvas panels are a activator components using data-content-id="{identifier}" for specificity.

On this page:

The Simplest Offcanvas

Example 1 – click this button:

This is an Offcanvas Side Panel

In this simple example, no width has been specified. Therefore it will expand to the width required for its content (i.e. the text you are currently reading), up to max-width: 1000px.

Click the icon above-right to dismiss. Alternatively, if there is any of your device screen not covered by this panel, then you can "click outside to dismiss".

<div class="offcanvas">
  <div class="offcanvas-ctrl offcanvas-ctrl-right" data-content-id="offcanvas-example">
    <span class="far fa-caret-square-left"></span>
  </div>

  <div id="offcanvas-example" class="offcanvas-content offcanvas-content-right">

    <div class="offcanvas-close offcanvas-close-left">
      <span class="fas fa-times"></span>
    </div>

    <!-- Offcanvas (e.g. sidebar) content -->

  </div>
</div>

You will need to specify whether the content of the offcanvas side panel is to slide in from the left or right – and you must also position its respective controller on the same side as what the content will slide in from).

You will also need to add an offcanvas control (e.g. navicon) for toggling the side panel. Be sure to set the offcanvas control code data-control_id="" to point to its respective offcanvas content id="".

It is possible to have more than one offcanvas side panel component. But only one can be activated at any one time.

Controlling the Offcanvas Content Width

The offcanvas content block will "stretch to fit" the width of whatever content you put inside it (up to 100% width).

You can also control the offcanvas content block width in your own stylesheet.

Note: The .offcanvas-content slides offcanvas to a width of 110% of the content width. The extra 10% ensures that a box-shadow on the content will also be hidden offcanvas.

The following demos operate as offcanvas sidebars at all viewport widths:

Example 2 – this offcanvas side panel is only as wide as its content requires:

Example 2: offcanvas side panel content.

Example 3 – this offcanvas side panel has style="width:200px":

Example 3: offcanvas side panel content

Example 4 – this offcanvas side panel has style="width:75%":

Example 4: offcanvas side panel content

Deactivating an Offcanvas Component Above a Media Query Viewport Width

Sometimes you may require some content to be displayed using an offcanvas side panel for smaller viewports but that switches to being an ordinary on-canvas panel for wider viewports. This is done by adding modifier classes (and by hiding the controls on wider viewports), as in the following table:

Offcanvas content	Offcanvas control	Offcanvas close
`.offcanvas-content`	(Offcanvas side panel operates at all viewport widths – so you won’t want to hide the controls.)
`.offcanvas-content-sm`	`.hide-md-up`	`.hide-md-up`
`.offcanvas-content-md`	`.hide-lg-up`	`.hide-lg-up`

Example 5 – Click the icon below (if you can see this on browser widths medium-down).

Example 5

This colored panel operates as an offcanvas side panel at small viewport widths, but it is on-canvas (as a simple DIV within this article) for medium viewports up.

In this simple example, no width has been specified for the offcanvas panel – so it will expand to the width required for its content (i.e. the text you are currently reading), up to max-width 100%.

You will also need to add the appropriate class to hide the controller and the closer above the same viewport width.

Another example of this browser width dependant offcanvas panel is the side menu in these docs.

Offcanvas Classes

Class	Notes	Modifiers
`.offcanvas-ctrl`	The offcanvas controller element.	Controller alignment: `.offcanvas-ctrl-left`, `.offcanvas-ctrl-right`
`.offcanvas-content`	The offcanvas content panel element.	Content panel alignment: `.offcanvas-content-left`, `.offcanvas-content-right` Responsive ’switches': `.offcanvas-content-sm` – operates as an offcanvas side panel only on narrow viewports (below the md viewport width)¹ `.offcanvas-content-md` – operates as an offcanvas side panel only on narrow-medium viewports (below the lg viewport width)²
`.offcanvas-close`	The offcanvas close-controller element (place this within the content panel).	Close-controller alignment: `.offcanvas-close-left`, `.offcanvas-close-right`

¹ Use .hide-md-up for hiding the controllers. ² Use .hide-lg-up for hiding the controllers.

Megamenus

Cards