Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

How it works#

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.

Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s variables.
When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
Similar to modals, only one offcanvas can be shown at a time.

Examples#

Live demo#

Here's how you can create simple offcanvas element:

Example offcanvas title

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toggle Offcanvas

Example offcanvas title

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toggle Offcanvas

Web Component
React
Angular

<uxf-offcanvas id="offcanvasLiveDemo" direction="start">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button id="toggleOffcanvasLiveDemo" variant="primary">  Toggle Offcanvas</uxf-button>
<script>  const toggleOffcanvasLiveDemo = document.getElementById('toggleOffcanvasLiveDemo');  const offcanvasLiveDemo = document.getElementById('offcanvasLiveDemo');  toggleOffcanvasLiveDemo.addEventListener('click', function (event) {    offcanvasLiveDemo.show = !offcanvasLiveDemo.show;  });</script>

export const LiveDemo = () => {
  const offcanvasRef = React.createRef();    return (    <>      <UxfOffcanvas direction="start" ref={offcanvasRef}>        <h5 slot="header" className="title">Example offcanvas title</h5>        <UxfCloseButton slot="header"></UxfCloseButton>        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.      </UxfOffcanvas>
      <UxfButton variant="primary" onClick={ () => { offcanvasRef.current.show = !offcanvasRef.current.show; } }>        Toggle Offcanvas      </UxfButton>    </>  );};
<LiveDemo />
export const LiveDemo2 = () => {      const [offcanvasVisible, setOffcanvasVisible ] = React.useState(false);   return (    <>      <UxfOffcanvas direction="start" show={offcanvasVisible}>        <h5 slot="header" className="title">Example offcanvas title</h5>        <UxfCloseButton slot="header"></UxfCloseButton>        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.      </UxfOffcanvas>      <UxfButton variant="primary" onClick={ () => { setOffcanvasVisible(!offcanvasVisible); } }>        Toggle Offcanvas      </UxfButton>    </>  );};
<LiveDemo2 />

import { Component } from '@angular/core';
@Component({selector: 'app-root',template: `<uxf-offcanvas #offcanvas direction="start">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button (click)="toggleOffcanvas(offcanvas)" variant="primary">  Toggle Offcanvas</uxf-button>`})
export class AppComponent {  toggleOffcanvas(offcanvas: any)  {    offcanvas.el.show = true;  }}

Placement#

By supplying "direction" property, you can manage placement of the offcanvas element. There’s no default placement for offcanvas components, so you must provide direction property;

start places offcanvas on the left of the viewport (shown above)
end places offcanvas on the right of the viewport
top places offcanvas on the top of the viewport
bottom places offcanvas on the bottom of the viewport

Up#

Set direction property to 'top' to place offcanvas on the top of the viewport.

Example offcanvas title

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toggle Offcanvas

Web Component
React
Angular

<uxf-offcanvas id="offcanvasUp" direction="top">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button id="toggleOffcanvasUp" variant="primary">  Toggle Offcanvas</uxf-button>
<script>  const toggleOffcanvasUp = document.getElementById('toggleOffcanvasUp');  const offcanvasUp = document.getElementById('offcanvasUp');  toggleOffcanvasUp.addEventListener('click', function (event) {    offcanvasUp.show = !offcanvasUp.show;  });</script>

export const DirectionUp = () => {
  const offcanvasRef = React.createRef();    return (    <>      <UxfOffcanvas direction="top" ref={offcanvasRef}>        <h5 slot="header" className="title">Example offcanvas title</h5>        <UxfCloseButton slot="header"></UxfCloseButton>        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.      </UxfOffcanvas>
      <UxfButton variant="primary" onClick={ () => { offcanvasRef.current.show = !offcanvasRef.current.show; } }>        Toggle Offcanvas      </UxfButton>    </>  );};
<DirectionUp />

import { Component } from '@angular/core';
@Component({selector: 'app-root',template: `<uxf-offcanvas #offcanvas direction="top">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button (click)="toggleOffcanvas(offcanvas)" variant="primary">  Toggle Offcanvas</uxf-button>`})
export class AppComponent {  toggleOffcanvas(offcanvas: any)  {    offcanvas.el.show = true;  }}

Down#

Set direction property to 'bottom' to place offcanvas on the bottom of the viewport.

Example offcanvas title

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toggle Offcanvas

Web Component
React
Angular

<uxf-offcanvas id="offcanvasDown" direction="bottom">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button id="toggleOffcanvasDown" variant="primary">  Toggle Offcanvas</uxf-button>
<script>  const toggleOffcanvasDown = document.getElementById('toggleOffcanvasDown');  const offcanvasDown = document.getElementById('offcanvasDown');  toggleOffcanvasDown.addEventListener('click', function (event) {    offcanvasDown.show = !offcanvasDown.show;  });</script>

export const DirectionDown = () => {
  const offcanvasRef = React.createRef();    return (    <>      <UxfOffcanvas direction="bottom" ref={offcanvasRef}>        <h5 slot="header" className="title">Example offcanvas title</h5>        <UxfCloseButton slot="header"></UxfCloseButton>        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.      </UxfOffcanvas>
      <UxfButton variant="primary" onClick={ () => { offcanvasRef.current.show = !offcanvasRef.current.show; } }>        Toggle Offcanvas      </UxfButton>    </>  );};
<DirectionDown />

import { Component } from '@angular/core';
@Component({selector: 'app-root',template: `<uxf-offcanvas #offcanvas direction="down">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button (click)="toggleOffcanvas(offcanvas)" variant="primary">  Toggle Offcanvas</uxf-button>`})
export class AppComponent {  toggleOffcanvas(offcanvas: any)  {    offcanvas.el.show = true;  }}

End#

Set direction property to 'end' to place offcanvas on the right side of the viewport.

Example offcanvas title

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toggle Offcanvas

Web Component
React
Angular

<uxf-offcanvas id="offcanvasEnd" direction="end">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button id="toggleOffcanvasEnd" variant="primary">  Toggle Offcanvas</uxf-button>
<script>  const toggleOffcanvasEnd = document.getElementById('toggleOffcanvasEnd');  const offcanvasEnd = document.getElementById('offcanvasEnd');  toggleOffcanvasEnd.addEventListener('click', function (event) {    offcanvasEnd.show = !offcanvasEnd.show;  });</script>

export const DirectionEnd = () => {
  const offcanvasRef = React.createRef();    return (    <>      <UxfOffcanvas direction="end" ref={offcanvasRef}>        <h5 slot="header" className="title">Example offcanvas title</h5>        <UxfCloseButton slot="header"></UxfCloseButton>        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.      </UxfOffcanvas>
      <UxfButton variant="primary" onClick={ () => { offcanvasRef.current.show = !offcanvasRef.current.show; } }>        Toggle Offcanvas      </UxfButton>    </>  );};
<DirectionEnd />

import { Component } from '@angular/core';
@Component({selector: 'app-root',template: `<uxf-offcanvas #offcanvas direction="end">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button (click)="toggleOffcanvas(offcanvas)" variant="primary">  Toggle Offcanvas</uxf-button>`})
export class AppComponent {  toggleOffcanvas(offcanvas: any)  {    offcanvas.el.show = true;  }}

Backdrop#

You can hide/disable backdrop by setting backdrop property to false. Default value is true.

Example offcanvas title

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toggle Offcanvas

Web Component
React
Angular

<uxf-offcanvas id="offcanvasNoBackdrop" direction="start" backdrop="false">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button id="toggleOffcanvasNoBackdrop" variant="primary">  Toggle Offcanvas</uxf-button>
<script>  const toggleOffcanvasNoBackdrop = document.getElementById('toggleOffcanvasNoBackdrop');  const offcanvasNoBackdrop = document.getElementById('offcanvasNoBackdrop');  toggleOffcanvasNoBackdrop.addEventListener('click', function (event) {    offcanvasNoBackdrop.show = !offcanvasNoBackdrop.show;  });</script>

export const NoBackdrop = () => {      const offcanvasRef = React.createRef();   return (    <>      <UxfOffcanvas direction="start" backdrop={false} ref={offcanvasRef}>        <h5 slot="header" className="title">Example offcanvas title</h5>        <UxfCloseButton slot="header"></UxfCloseButton>        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.      </UxfOffcanvas>      <UxfButton variant="primary" onClick={ () => { offcanvasRef.current.show = !offcanvasRef.current.show; } }>        Toggle Offcanvas      </UxfButton>    </>  );};
<NoBackdrop />

import { Component } from '@angular/core';
@Component({selector: 'app-root',template: `<uxf-offcanvas #offcanvas direction="start" backdrop="false">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button (click)="toggleOffcanvas(offcanvas)" variant="primary">  Toggle Offcanvas</uxf-button>`})
export class AppComponent {  toggleOffcanvas(offcanvas: any)  {    offcanvas.el.show = true;  }}

Scrolling#

You can enable document scrolling by setting 'scrollDocument' property to true. Default value is false.

Example offcanvas title

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toggle Offcanvas

Web Component
React
Angular

<uxf-offcanvas id="offcanvasScroll" direction="start" scroll-document="true">  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button id="toggleOffcanvasScroll" variant="primary">  Toggle Offcanvas</uxf-button>
<script>  const toggleOffcanvasScroll = document.getElementById('toggleOffcanvasScroll');  const offcanvasScroll = document.getElementById('offcanvasScroll');  toggleOffcanvasScroll.addEventListener('click', function (event) {    offcanvasScroll.show = !offcanvasScroll.show;  });</script>

export const Scroll = () => {      const offcanvasRef = React.createRef();   return (    <>      <UxfOffcanvas direction="start" scrollDocument={true} ref={offcanvasRef}>        <h5 slot="header" className="title">Example offcanvas title</h5>        <UxfCloseButton slot="header"></UxfCloseButton>        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.      </UxfOffcanvas>      <UxfButton variant="primary" onClick={ () => { offcanvasRef.current.show = !offcanvasRef.current.show; } }>        Toggle Offcanvas      </UxfButton>    </>  );};
<Scroll />

import { Component } from '@angular/core';
@Component({selector: 'app-root',template: `<uxf-offcanvas #offcanvas direction="start" scrollDocument>  <h5 slot="header" class="title">Example offcanvas title</h5>  <uxf-close-button slot="header"></uxf-close-button>  Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</uxf-offcanvas>
<uxf-button (click)="toggleOffcanvas(offcanvas)" variant="primary">  Toggle Offcanvas</uxf-button>`})
export class AppComponent {  toggleOffcanvas(offcanvas: any)  {    offcanvas.el.show = true;  }}