- ##### Basic Components

- All
- Alert
- Button
- Badges
- Breadcrumb
- Cards
- Color
- Collapse
- Carousel
- Dropdowns
- Offcanvas
- Pagination
- Progress
- List group
- Modal
- Spinner
- Tabs & pills
- Tooltip
- Toasts
- Typography
- Other

- ##### Advance Components

- Sweet alert
- Datepicker
- Lightbox
- Modal
- Notification
- Rangeslider
- Slider
- Syntax Highlighter
- Tour
- Tree view

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

Try scrolling the rest of the page to see this option in action.

#### 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

This is "Default behavior" of offcanvas.

#### 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

Try scrolling the rest of the page to see this option in action.

#### 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.

##### Mantis Customizer

- ###### Theme Layout

  Choose your layout

  Direction

  RTL

- ###### Theme Mode

  Choose light or dark mode
  Light Dark

- ###### Color Scheme

  Choose your primary theme color
  Theme 1 Theme 2 Theme 3 Theme 4 Theme 5 Theme 6 Theme 7 Theme 8 Theme 9

- ###### Layout Width

  Choose fluid or container layout
  Fluid Container

- ###### Font Family

  Choose your font family.
  Aa Public Sans Aa Roboto Aa Poppins Aa Inter