Off-Canvas

The off-canvas component block is a design pattern that hides aside content outside of the default viewport which can be revealed using a button trigger. This is most commonly used for navigation components on mobile viewports. The structure of an off-canvas block is encompassed within four elements: oc-wrap, oc-content, oc-inner and oc-aside.

<div class="oc-wrap">
  <section class="oc-content">
    <div class="oc-inner">
      ...
    </div>
  </section>
  <aside class="oc-aside oc-aside-id">
    ...
  </aside>
</div>
<button class="oc-trigger" data-target="oc-aside-id">Menu</button>

If you’re looking to add a close trigger for off-canvas content, simply create a button with the .oc-trigger class and omit the data-target attribute. You can optionally use the .chip class and an icon SVG for the trigger.

<button class="oc-trigger chip">{% include icons/x.svg %}</button>

Transitions

There are eight unique effects with left and right position variations and the option to create custom transitions. Try out the transitions below. The transition value is what you’d set in the $offcanvas('transition') variable or pass to the add-offcanvas-transition() mixin.

Credit: Transition effects were inspired from an article by Mary Lou over at Codrops.

If instead you prefer to create a custom transition effect, you can disable the default transition output by passing the value null to the $offcanvas('transition') variable. Alternatively, you can also disable all class based output by passing the value false to the $offcanvas('classes') variable. Either of these methods will disable the default class output and allow you to create your own custom transition effects. Just make sure you’re outputting the base off-canvas styles if you opt to disable class based output.

// If disabling all class output, you can still build base offcanvas using:
@include make-offcanvas();

// For custom transition effects, simply use the unique offcanvas aside
// identifier and active class (`.oc-active` by default)
.custom-aside.oc-aside {
  left: 0;
  visibility: visible;
  transform: translate3d(-100%, 0, 0);
}
.custom-aside.oc-active .custom-aside.oc-aside {
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

Keep in mind if you modify the default classes or transition duration in your $offcanvas variable map, you should also reflect those changes in your JavaScript where these values are referenced.

JavaScript

Off-canvas make use of the off-canvas JavaScript component for it’s behavior. To initiate the off-canvas JavaScript use the init() method.

offcanvas.init();

For more details on how to customize and use the public methods, take a look at the off-canvas JavaScript documentation.

Variable Map

Off-canvas variables are encompassed within the $offcanvas map and are used throughout all off-canvas mixins to set default values.

$offcanvas: (
  'output' : true,
  'class' : 'oc',

  'class-wrap'     : 'oc-wrap',
  'class-content'  : 'oc-content',
  'class-inner'    : 'oc-inner',
  'class-aside'    : 'oc-aside',
  'class-aside-id' : 'oc-aside-left',
  'class-active'   : 'oc-active',
  'class-delay'    : 'oc-delay',

  'screen-content' : rgba($black, 0.2),
  'screen-aside'   : rgba($black, 0.2),

  'transition' : 'slide-in-left',
  'transition-duration' : 0.5s,
  'width' : 280px,
  'wrap-height' : 100%,
  'aside-position' : fixed,

  'background-wrap' : null,
  'background-aside' : $white,
  'background-content' : null,

) !default;

make-offcanvas

Creates the base styles for the off-canvas block including wrapper, content, inner content and aside content whos default classes are output as .oc-wrap, .oc-content, .oc-inner and .oc-aside respectivly. If content and aside screen backgrounds are provided, styles will also be output for these pseudo elements.

@include make-offcanvas( $options: () );
Variable Type Default
$options Map $offcanvas

Example Usage

Use this mixin to output the default class styles for off-canvas. You can also pass in a variable map to override specific settings.

// Use all default settings from $offcanvas variable map
@include make-offcanvas();

// Change the background styles, but keep the rest of the $offcanvas defaults
@include make-offcanvas((
  'background-aside' : $gray-800,
  'background-content' : $gray-100
));

add-offcanvas-transition

Creates transition styles for off-canvas elements. This mixin makes available 8 unique transition effects with left and right variations. These can be output using their respective style strings:

Avaliable Transition Effects
Left Right
'slide-in-left' 'slide-in-right'
'reveal-left' 'reveal-right'
'slide-along-left' 'slide-along-right'
'slide-out-left' 'slide-out-right'
'scale-down-left' 'scale-down-right'
'scale-up-left' 'scale-up-right'
'scale-rotate-left' 'scale-rotate-right'
'open-door-left' 'open-door-right'

You can sample all of these transition effects in the demonstration above.

Variable Type Default
$target String $offcanvas('class-aside-left')
$style String $offcanvas('transition')
$options Map $offcanvas

Example Usage

It’s important to specify the target you’d like the transition effect to be applied to. This identifier is the unique class that is applied to the .oc-aside element and also the value set in off-canvas triggers using the data-target attribute.

// Adding custom transition effects for two seperate off-canvas aside content
@include add-offcanvas-transition('oc-aside-left', 'slide-out-left');
@include add-offcanvas-transition('oc-aside-right', 'slide-out-right');
<div class="oc-wrap">
  <section class="oc-content">
    <div class="oc-inner">
      ...
    </div>
  </section>
  <aside class="oc-aside oc-aside-left">
    ...
  </aside>
  <aside class="oc-aside oc-aside-right">
    ...
  </aside>
</div>

add-offcanvas-wrap-height

Sets the off-canvas wrapper element height to 100% using the delay class to only remove the height after the transition is finished. This is used for specific transitions which use 3D transforms.

Variable Type Default
$target String null
$options Map $offcanvas

Example Usage

Primarily used internally in the add-offcanvas-transition() mixin, this can also be used for custom transitions that require an off-canvas wrapper height of 100%.

// SCSS input
// If your transition effect requires a wrap with 100% height
@include add-offcanvas-wrap-height('target-id');

// CSS Output
.target-id.oc-wrap {
  transition: height 0.1s 0.25s;
}
.target-id.oc-delay.oc-wrap {
  height: 100%;
}
.target-id.oc-active.oc-wrap {
  height: 100%;
  transition: none;
}

Changing the height of an element that is being animated will cause the scroll to jump to the top in that element. It’s preferable to try and keep the height of the wrapper the same if possible.