Off-canvas navigation has long been a go-to design pattern for creating navigation interfaces that are both user-friendly and semantically solid. Simply put, off-canvas navigation involves moving the navigation out of view by default and bringing it into view upon interaction. This functionality is easily achieved in modern web browsers using pure CSS (and sometimes HTML5/JavaScript).
The technology is constantly changing, so most of the frameworks have evolved. Many beginners or even experts would easily get lost trying to build one on their own, but here’s a list of resources that should come in handy if you are looking to build one from scratch.
I’ve hand-picked 10 of the best JavaScript and CSS-based mobile app-style off-canvas navigation menus written entirely in Vanilla JavaScript or pure CSS. Enjoy!.
Originally Published Nov 10 2017, updated Jan 18 2026
1. Beautiful Dashboard Sidebar Menu Template
A beautiful, responsive, collapsible sidebar menu (also called offcanvas menu) created for dashboard & admin panel projects.
2. Responsive Multi-level Sidebar Menu With JavaScript/CSS
A responsive sidebar menu with multi-level sub-menus written in plain JavaScript and CSS.
The sidebar menu is displayed in Compact mode on page load and will expand to Full mode when hovering over.
It collapses the sidebar into an off-canvas navigation on mobile, and your visitors are able to reveal the menu by clicking the hamburger button.
3. Responsive Multi-level Dropdown Menu With JavaScript And CSS – ozmenu.js
A modern, clean, responsive, multi-level dropdown menu written in vanilla JavaScript and CSS.
The key feature of this dropdown menu is that it can automatically convert into an off-canvas side navigation on mobile devices, ensuring your website or web app remains easy to navigate and use on any device.
In addition, the menu supports multiple levels of dropdown items, which is great for content-rich websites with complex navigation structures.
4. Sidebar Menu With Curved Outside Effect
An expanding sidebar navigation menu with a curved outside effect.
5. Hamburger Sidebar Navigation In Pure CSS – Sidebar-Menu
A hamburger sidebar navigation (also called off-canvas menu & push menu) built using checkbox input, CSS/CSS3, and Font Awesome icons.
6. Simple Sidebar Hamburger Menu In CSS
A really simple sidebar hamburger menu written in plain HTML and CSS.
It uses the native HTML checkbox to toggle the side menu, without writing any JavaScript code.
7. Responsive Dropdown/Off-canvas Navigation In Vanilla JavaScript – Menue
A responsive, multi-level, cross-platform dropdown/off-canvas navigation system for both desktop and mobile.
Features:
- Auto expands the nav to the full width and sticks it to the top of the page on scroll.
- Auto transforms the horizontal navbar into an off-canvas side nav on mobile & tablet devices.
- Supports unlimited levels of sub-menus. Based on nested HTML lists.
8. Multi-level Sliding Side Menu In Vanilla JavaScript – Slide Menu
This is the vanilla JavaScript version of the jQuery slide menu plugin that helps web developers implement a smoothly sliding, multi-level, off-canvas navigation in vanilla JavaScript.
9. Smooth Collapsible Sidebar Navigation
A modern sidebar navigation with smooth expand & collapse transitions, written in CSS/CSS3 and vanilla JavaScript.
10. Responsive Sidebar Navigation With Hamburger Toggle Button
A modern responsive sidebar panel (also called off-canvas side menu) with an animated hamburger toggle button. Written in plain JavaScript, CSS, and HTML.
Conclusion:
Off-canvas navigation is gaining further popularity as more people start to realize its value. Apps like Facebook, Twitter, and even Medium have all decided to go with this navigation mode for the mobile version of their websites.
This is maybe the most important reason why we have decided to create our own list of 10 best off-canvas menus: we want you to use them on your website or app too. Naturally, we couldn’t pick all of our favorites, so the ones we chose are all very reliable in terms of both performance and coding quality.