Quantum Admin | Offcanvas

Offcanvas

Basic example

Offcanvas is a sidebar component that can be toggled via JavaScript. The example below shows a simple offcanvas navigation.

Body scrolling

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

Static backdrop

When backdrop is set to static, the offcanvas will not close when clicking outside of it.

Responsive

Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual.

Resize your browser to show the responsive offcanvas toggle.

Placement

Offcanvas can be placed on left, right, top or bottom of your screen.

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

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

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

I will not close if you click outside of me.

This is content within an .offcanvas-xxl.

This is content within an .offcanvas-xl.

This is content within an .offcanvas-lg.

This is content within an .offcanvas-md.

This is content within an .offcanvas-sm.

Ex pariatur reprehenderit nostrud veniam occaecat magna aliqua ea. Veniam Lorem duis sit quis ex voluptate et dolor. Elit nulla ipsum in cupidatat aute tempor esse enim culpa excepteur voluptate. Adipisicing proident deserunt nulla adipisicing consectetur aliqua laborum. Anim minim minim ad cupidatat enim elit labore ullamco labore magna proident veniam consequat nostrud. Enim nulla officia elit amet proident mollit ipsum sint elit ipsum. Id sit nostrud cillum proident dolore.

Culpa incididunt sint commodo consequat commodo aliqua Lorem pariatur aliqua culpa aute veniam. Ea Lorem est pariatur elit adipisicing tempor velit quis fugiat laboris est. Laboris ipsum duis veniam occaecat. Pariatur aliqua dolor irure nostrud et anim consectetur laborum nulla commodo fugiat. Nisi elit non occaecat sit exercitation veniam aute nostrud. Cillum aliquip enim et aliqua aute fugiat pariatur et veniam do ipsum pariatur incididunt. Aliqua excepteur ullamco consequat cillum proident in officia dolore culpa occaecat occaecat minim.

Excepteur ipsum eiusmod laborum exercitation eu amet duis mollit adipisicing culpa laborum eu culpa. Ex consequat non esse nostrud id officia esse. Aliqua ex ut occaecat commodo sunt enim cupidatat. Sit eiusmod non reprehenderit deserunt magna labore dolor mollit incididunt voluptate velit velit. Voluptate ad ea mollit et dolore in.