Offcanvas

Basic example

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

Link with href

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.

Placement

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

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

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

Backdrop with scrolling

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

Offcanvas
I will not close if you click outside of me.
Responsive offcanvas

This is content within an .offcanvas-xxl.

Responsive offcanvas

This is content within an .offcanvas-xl.

Responsive offcanvas

This is content within an .offcanvas-lg.

Responsive offcanvas

This is content within an .offcanvas-md.

Responsive offcanvas

This is content within an .offcanvas-sm.

Offcanvas top
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.
Offcanvas right
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.
Offcanvas bottom
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.