Off Canvas Navigation with CSS & a Checkbox

Off canvas layouts are a popular way of displaying content, especially navigation, hidden from the main viewport. There are quite a few JavaScript and jQuery off canvas plugins, but in the latest revision of my personal blog I decided to attempt the off canvas layout without any JavaScript at all. The solution I came up with surprisingly works just like you’d expect, minus the ability to swipe the off canvas navigation open and closed on touch devices (of course, this could be added with a little bit of JavaScript and a touch library).

The technique I ended up using involves a checkbox, two labels and a little pointer-events: none action. There’s been some other articles written on handling off canvas without JavaScript, but most of them use the :target pseudo-class. There’s nothing wrong with this approach, but I decided to give it a shot a different way.


Five elements are needed for this technique to fully work: a hidden checkbox, a label to trigger the off-canvas open, a label to cover the entire page to close the off-canvas, the off-canvas element itself and finally your main page wrapper.

Base style

The checkbox is going to be hidden, the .icon-menu styled like a hamburger, the .body-trigger positioned absolutely on top of everything with pointer-events: none, and the .off-canvas aside positioned absolutely off the canvas to the right.

[cta id=”3126″ align=”none”]

Making it work

To make the off-canvas actually slide open now, we just use some pseudo-classes on the input and sibling selectors to target the siblings of the checkbox when it’s checked. This is why, above, the checkbox comes before the labels. CSS sibling selectors cannot target elements before them in the DOM.

Using Sass, we can nest the pseudo-classes inside the #nav-checkbox selector:

And with the CSS transitions that were applied above, we now have a functioning off-canvas menu! Of course, in most situations you’d probably throw in a media query that hides the off-canvas stuff for larger screens. The door’s wide open to experimenting with this and taking it further.

CodePen Example

Kyle Pennell
Kyle Pennell is a marketer and writer with a variety of technical chops (JavaScript, Google Sheets/Excel, WordPress, SEO). He loves clear and helpful copy and likes automating things and making web apps (mostly maps). Found at and many other digital spaces