View Demo Buy Now Our Portfolio

Navigation Style

Vertical Menu

Horizontal Click Menu

Horizontal Hover Menu

LTR and RTL VERSIONS

LTR Version

RTL Version

Light Theme Style

Light Theme

Light Primary

Dark Theme Style

Dark Theme

Dark Primary
Dark Custom Background
Background Image
Bg-Image Bg-Image Bg-Image Bg-Image

Menu Styles

Light Menu

Color Menu

Dark Menu

Gradient Menu

Header Styles

Light Header

Color Header

Dark Header

Gradient Header

Layout Width Styles

Full Width

Boxed

Layout Positions

Fixed

Scrollable

Sidemenu layout Styles

Default Menu

Icon with Text

Icon Overlay

Closed Sidemenu

Hover Submenu

Hover Submenu Style 1

Reset All Styles

Loader
logo
logo

Offcanvas

  1. UI Elements
  2. Offcanvas

Offcanvas Demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.

Link with href

Offcanvas Placements

Use .offcanvas-start .offcanvas-top .offcanvas-end .offcanvas-bottom these modified classes to change Offcanvas Placement respectively.

Offcanvas Scrolling Options

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle scrolling and data-bs-backdrop to toggle the backdrop.

Offcanvas

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

Offcanvas Left
...
Offcanvas Top
...
Offcanvas Right
...
Offcanvas Bottom
...
Colored with scrolling

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

Offcanvas with backdrop

.....

Backdrop with scrolling

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

Licenses

Regular Licenses

You can't charge from your
End Product End Users

Buy Now

6 months support

Buy Now

12 months support
Extended Licenses

You can charge from your
End Product End Users

Buy Now

6 months support

Buy Now

12 months support
View license details