Explore Components

Offcanvas

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

Reference
Live demo
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Link with href
Offcanvas
$746.5k +20.6

Past 30 days

Customer Plan MRP
Logicoma
Team -$72
UAC
Team $199
Biffco
Team -$72
Matsumura
Team -$72
Biffco
Team -$72
Logicoma
Team -$72
UAC
Team $199
Biffco
Team -$72
Matsumura
Team -$72
Biffco
Team -$72
Placement
Offcanvas top
Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Offcanvas right
$746.5k +20.6

Past 30 days

Customer Plan MRP
Logicoma
Team -$72
UAC
Team $199
Biffco
Team -$72
Matsumura
Team -$72
Biffco
Team -$72
Logicoma
Team -$72
UAC
Team $199
Biffco
Team -$72
Matsumura
Team -$72
Biffco
Team -$72
Offcanvas bottom
Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Backdrop
Colored with scrolling

Main Title

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Offcanvas with backdrop

Main Title

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Backdroped with scrolling

Main Title

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Some Title

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Theme Customization
  • Theme Mode

    Light / Dark / System

  • Accent color

    Choose your primary theme color

  • Sidebar Caption

    Caption Hide / Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Full / Fixed width

  • Font Style

    Choose theme font