OneTaskBy Tim King · Updated
Off-Canvas Menu Generator
Slide-Out Side Menu in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Off-Canvas Menu works
An off-canvas menu is a navigation panel that sits just outside the screen and slides in from the side when a button is pressed. Choose the side, width and overlay, add your links, and copy the HTML, CSS and JavaScript.
Off-canvas menus give long navigation lists a full-height panel on phones and tablets, where a dropdown would run off the bottom of the screen. The panel is fixed to one edge of the window and moved out of view with a transform, which the browser animates smoothly.
How the off-canvas menu handles focus
When the panel opens, focus moves to its close button so keyboard and screen reader users start inside it. Tab and Shift+Tab loop through the panel's buttons and links instead of wandering onto the hidden page behind. Escape, the close button and a click on the overlay all close the panel, and focus goes back to the button that opened it.
Hidden properly
While closed the panel also has visibility: hidden and aria-hidden="true", so its links cannot
be reached with the Tab key and screen readers skip it, not just sighted users. The visibility
change is part of the transition, so the panel stays visible until it has finished sliding out.
FAQ
Should an off-canvas menu open from the left or the right?
Left is the most common and matches where the hamburger button usually sits. Right suits sites that put the button in the top right corner, and shopping carts, so the panel opens from the same side as the control that opened it.
Should the page scroll while the menu is open?
Most people expect it not to. Add overflow: hidden to the body when the menu opens and remove it
when it closes, in the setOpen function. The overlay already stops clicks reaching the page behind
while the panel is showing.
Can I use a dialog element instead?
Yes. A <dialog> opened with showModal() gives you the focus trap, Escape and a backdrop for
free. This generator uses a plain panel so the animation works the same in every browser, but the
modal builder on this site shows the dialog approach.
How wide should the panel be?
Around 280 to 320 pixels suits most link lists. The CSS caps the width at 85 percent of the screen, so a strip of the page stays visible on small phones and people can see where to tap to close it.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Mobile Menu
Build a responsive hamburger menu with an animated icon and panel.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Animated Dropdown
Build an accessible dropdown menu with a fade, slide or scale animation.
Tabs Builder
Build accessible tabs with arrow key support and three styles.
Vertical Tabs Builder
Build accessible side tabs that turn into a row on phones.