Bootstrap (5.3) layered offcanvas components

05-11-2024

Disclaimer: I'm not a frontend expert :)

Although it's not supported, you can have multiple layers of the Bootstrap offcanvas components. The biggest limit is the z index value (https://getbootstrap.com/docs/5.3/layout/z-index/). That is if you don't change the values of course. In the example you'll see I've added something else too.

Normally the offcanvas components are placed with position: fixed. In the example I've placed the second offcanvas component inside its parent using position: absolute. Therefor I needed to set the z-index value to 1047. Its backdrop has a z-index value of 1046.

The result is quit nice if I may say so! You can have a look at the example at rolfdenhartog.nl/examples/bootstrap.html.