What is react-offcanvas and when to use a side panel?

The term «react-offcanvas» commonly refers to either a package or the pattern of rendering UI off the main viewport and sliding it into view. Implementations range from a simple CSS-driven drawer to a fully controlled React component exposing open/close APIs.
Use a side panel when you need temporary, contextual UI: navigation, filters, carts, contextual settings or secondary actions that don’t belong in the main content flow.

A good off-canvas component keeps the DOM logical: it should be accessible, respect focus order, and not trap keyboard users unexpectedly. Modern mobile-first UIs favor off-canvas navigation because it preserves screen real estate while keeping interactions discoverable.

You’ll also find overlap with overlay panels and slide-out menus: overlays dim background content and focus attention, while slide-out menus can be either persistent (on desktop) or temporary (on mobile). The implementation details govern whether your panel is a «drawer», «overlay panel», or «side navigation».

Installation and getting started (react-offcanvas setup)

If you want a ready-made package, search npm for «react-offcanvas» or similar drawer packages. For example, you can try:

npm install react-offcanvas
# or
yarn add react-offcanvas

Note: package APIs vary. The examples in this article favor a minimal custom component so you can understand the moving parts (state, overlay, transitions, and accessibility) rather than learning a specific third-party API.

To get started quickly in an app scaffolded with Create React App:

npx create-react-app my-app
cd my-app
npm start

Then add your off-canvas component file and import it into your layout. The next section provides a compact implementation you can drop in and customize.

Core concepts: panels, overlay, positioning and transitions

Off-canvas components are built on a few simple concepts: the panel itself (the element that slides), the overlay/backdrop (the dim layer between panel and content), and the trigger (button or swipe gesture that opens the panel).
Positioning is usually fixed or absolute with transforms: translateX/translateY drives smooth hardware-accelerated animations while keeping the panel out of the normal document flow.

Transition strategy matters. Use CSS transitions or the Web Animations API to animate transforms and opacity. Animating width or left/top is typically slower and should be avoided. A common pattern is to animate translateX from -100% to 0 for left-side panels and translateX from 100% to 0 for right-side panels.

Z-index ordering must place the overlay below the panel but above the page content. Also ensure pointer-events are handled: the overlay should intercept clicks to dismiss the panel, and the panel should capture interactions while open.

Implementation: a practical react-offcanvas example (React panel component)

Below is a compact, accessible OffCanvas React component that covers controlled/open state, overlay, escape-to-close, focus trapping basics, and customizable positioning (left/right/top). Use it as a base for your React side navigation or slide-out menu.

{`// OffCanvas.jsx
import React, {useEffect, useRef} from 'react';
import './offcanvas.css'; // minimal CSS shown below

export default function OffCanvas({isOpen, onClose, position='left', children, ariaLabel='Side panel'}) {
  const panelRef = useRef(null);

  useEffect(() => {
    function onKey(e) {
      if (e.key === 'Escape' && isOpen) onClose();
    }
    if (isOpen) {
      document.body.style.overflow = 'hidden';
      document.addEventListener('keydown', onKey);
      // naive focus move:
      panelRef.current?.focus();
    } else {
      document.body.style.overflow = '';
      document.removeEventListener('keydown', onKey);
    }
    return () => {
      document.body.style.overflow = '';
      document.removeEventListener('keydown', onKey);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <>
      

      
    
  );
}`}

The CSS (offcanvas.css) is intentionally small: it uses transforms and opacity for animations, positions the panel, and styles the overlay. Keep styles in your design system for consistent spacing and colors.

{`/* offcanvas.css */
.oc-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:999;opacity:0;animation:fadeIn .18s forwards;
}
.oc-panel{position:fixed;top:0;height:100vh;width:320px;background:#fff;z-index:1000;box-shadow:0 8px 24px rgba(2,6,23,.2);outline:none;transform:translateX(-110%);transition:transform .25s ease}
.oc-right{right:0;left:auto;transform:translateX(110%)}
.oc-left{left:0;right:auto}
.oc-panel.oc-left{transform:translateX(0)} /* toggled on mount by rendering or class change */
@keyframes fadeIn{to{opacity:1}}`}

Note: This example returns null when closed (unmounted). For smoother transitions on close, keep the panel mounted and toggle a class to animate out before removing it from the DOM.

Customization: styling, positioning, and advanced behaviors

Customize the panel by altering width, transitions, and position. You can support top/bottom drawers by swapping translateY for translateX. For responsive layouts, make the panel persistent on large viewports and overlay on small ones using media queries and a controlled prop (e.g., isPersistent).

Add features such as swipe-to-close for touch devices (listen for touchstart/touchmove/touchend and detect horizontal swipe), or nest the panel’s content to support scroll locking within the panel while the overlay remains scroll-blocked.

For animations, consider CSS variables for duration and easing so design tokens control motion. If you need route-aware side menus, connect the panel’s state to your router and close on navigation events to maintain expected UX.

Accessibility and best practices for react-offcanvas

Accessibility is non-negotiable. Announce the panel role with role=»dialog» or role=»complementary» and add aria-label or aria-labelledby for screen readers. Move focus into the panel when it opens and return focus to the trigger when it closes.

Implement a focus trap to prevent focus from escaping the panel while it’s open; libraries like focus-trap-react can help. Ensure keyboard users can close the panel with Esc and that interactive elements are reachable via Tab.

Avoid hiding content using display:none if you need it to be discoverable by assistive tech while closed; generally, remove or mark content as inert/aria-hidden when the panel is closed to prevent screen reader confusion.

Performance, SEO snippets and voice search optimization

Off-canvas components are client-side UI elements and do not directly affect crawlable page content. For voice search and featured snippets, ensure critical content remains indexable in the main document or is server-rendered when necessary. Use structured content on the page to expose key info.

Optimize for voice queries by including short, direct answers in the document where appropriate (e.g., «How to install react-offcanvas: npm install react-offcanvas»). These short answers increase the chance of being surfaced as a quick snippet for voice assistants.

For performance, minimize reflows by animating transforms and opacity. Lazy-load panel content if it loads heavy assets (images, maps) and avoid loading those resources until the panel is opened.

Semantic Core (Primary and Related Search Queries)

Use this semantic core when optimizing headings, meta tags, and internal links. Grouped by intent and relevance.

FAQ