Off-canvas panel

An off canvas, built into your site with no plugin and no library. A native <dialog> that slides in from the left, right, top or bottom when any data-offcanvas-open trigger asks. Modal by default (backdrop, focus kept in, Escape, scroll lock keeping the scrollbar width), or push: non-modal, publishing --ofc-push for the host to move its page over. Focus returns to the opener. Without JavaScript the panel renders inline where it sits, and its #<id> link jumps to it.

Open a panel from each edge. Escape, the × or a click outside closes it, and focus comes back here.

Menu, from the left Filters, from the right Notice, from the bottom Notes that push the page

Keep the cart, the filters or the account menu one tap away, sliding in from the edge instead of crowding the page.

Also called

UABB Off-CanvasElementor Off-Canvasslide-out panelside drawerpush menuoffcanvasflyout panelslide-in cart

What it replaces

UABB “Off-Canvas” module (Beaver Builder)
Elementor Pro Off-Canvas widget
slide-out cart and side-cart plugins
push-menu and slide-panel jQuery plugins

Good for

Things that belong beside the page and are wanted now and then: a cart, product filters, an account or secondary menu, a short form (a callback request), a notice, a table of contents on a long page. Push mode suits a panel people keep open while they read, such as notes or a contents list.

Not for

The site’s main navigation. mega-menu already folds its own links behind a Menu button below its breakpoint, in the header, keeping the nav landmark, aria-current on the page you are on, arrow-key movement and a no-JavaScript fallback; use that for the main menu on every screen size. Use off-canvas for what sits beside that menu (the cart, filters, an account menu), or for a secondary nav on a site whose main menu is plain header links. Also not for a message that must interrupt (that is modal) or content everyone needs (that belongs on the page).

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

A native <dialog> named by its title (aria-labelledby). Modal mode uses showModal(): the page is inert, Tab stays in the panel, Escape closes it, and the page does not scroll underneath, with the scrollbar’s width kept so nothing shifts.
Push mode is non-modal (show()): the page stays usable beside it, and Escape closes it while focus is in the panel or on its trigger.
Triggers get aria-controls and aria-expanded (and aria-haspopup="dialog" in modal mode). A trigger that is not a link or button gets role="button" and tabindex="0" and opens on Enter or Space.
Focus moves into the panel on open and returns to the opener on close. The close button is a real 44px <button> named by closeLabel. A backdrop click closes a modal panel; a text selection dragged out of it does not.
Without JavaScript the panel renders inline, visible, under its heading, at its place in the page; a link trigger to #<id> jumps to it; the close button, which could not work, is not shown.
prefers-reduced-motion: the panel appears and goes at once, with no slide and no backdrop fade.

Where it's live

superherotech.ai: /elements/off-canvas/ (demo)

How to ask for it

“The off-canvas on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.

More in Navigation & layout

See them all working

Tabcordion
The same details as tabs where there is room and as an accordion where there is not, even in a sidebar, and the section someone was reading stays open when it changes.
Scrollbox
Fit a long row of projects, products or categories into one line, and let the edges show there is more to scroll.
Mega menu
Put every page a visitor might want one click from the header, grouped the way your customers think about them.
Accordion / FAQ
FAQ page design that gets people their answer fast: each question opens with a tap, every answer is findable with Ctrl+F, and search engines and AI assistants can read them as questions and answers.