Build Accessible Sliding Hamburger Menus with Offcanvas

By Jake Rocheleau. in Toolkit. Updated on July 29, 2022.

The free Offcanvas plugin is one of many resources for sliding navigations. You can find a bunch of similar plugins online, but Offcanvas stands out for a few reasons.

It’s a fairly lightweight library and while it does run on jQuery it’s also not very difficult to set up. This is true for both the JavaScripts code and the HTML code, so you won’t need to change your default navigation much at all.

The Offcanvas plugin lets you designate certain areas where the menu should appear. By default, this is usually the left or right side of the screen, but you can also choose the top or bottom of the screen, too.

This makes Offcanvas great for more than just sliding hamburger menus. It can be used for sliding notification bars or even opt-in fields to capture emails.

Each panel works the same way where the user can click anywhere on the page to hide the sliding menu. And, you can set up keyboard commands that run compliant with ARIA guidelines for proper web accessibility.

To get Offcanvas installed, you just need a copy of jQuery along with the Offcanvas CSS/JS files. You can pull these through npm, bower, or directly from GitHub.

Also, on the GitHub page, you’ll see a bit of sample code you can rework to suit your website. All you need for the sliding nav is an <aside> element containing your menu (or whatever you want to slide onto the page).

This is triggered through an anchor link pointing towards the ID of your sliding menu. Here’s a snippet from the Offcanvas GitHub that illustrates a brief example:

<body>
  <div class="c-offcanvas-content-wrap">
      ...
      <a href="#off-canvas" data-offcanvas-trigger="off-canvas">
        Menu
      </a>
      ...
  </div>
  <aside class="js-offcanvas" id="off-canvas"></aside>
</body>

<script type="text/javascript">
$('#off-canvas').offcanvas({
// options
});
</script>

If you’re able to slightly rework the HTML in your page you should have no trouble getting this all set up.

The offcanvas() function even supports options for changing the animation speed, default class, and callback functions that can run after the menu opens or closes.

Offcanvas is a great choice for jQuery-powered navigation if you like hamburger menus.