React Offcanvas: The No-Nonsense Guide to Side Panels, Slide-Out Menus & Overlay Navigation

Published: June 2025  ·  Reading time: ~10 min  ·  Level: Beginner–Intermediate

Why Bother with react-offcanvas at All?

If you’ve ever tried to hand-roll a React side panel from scratch, you already know the ritual: thirty minutes of confident coding, followed by two hours of wrestling with z-index, CSS transition timing functions, and the special kind of rage that only a runaway overflow: hidden on a parent element can produce. The react-offcanvas package exists precisely to spare you that experience.

At its core, react-offcanvas is a lightweight, dependency-lean React component library for rendering off-canvas panels — UI elements that live outside the visible viewport and slide into view on demand. Think mobile navigation drawers, filter sidebars in e-commerce apps, notification trays, or contextual help panels. These patterns appear in almost every serious web application today, and react-offcanvas provides the structural scaffolding so you can focus on what goes inside the panel, not on how to make it slide reliably on Chrome, Firefox, Safari, and that one Android WebView your QA team keeps finding bugs in.

The library is also refreshingly small. It doesn’t ship Bootstrap, doesn’t assume your CSS methodology, and doesn’t force opinions about state management. It hands you a React panel component that accepts a handful of well-named props, and then gets out of your way. For teams already running lean bundles, that matters. For solo developers prototyping fast, it matters even more.

react-offcanvas Installation: From Zero to First Render

Getting react-offcanvas installed takes about forty-five seconds — the kind of installation experience that should be the norm but somehow still feels like a small victory. Open your terminal inside any React project (Create React App, Vite, Next.js, or a custom Webpack setup all work fine) and run one of the following:

# npm
npm install react-offcanvas

# yarn
yarn add react-offcanvas

# pnpm
pnpm add react-offcanvas

Once the package is installed, the react-offcanvas setup requires exactly two imports in the file where you want to render the panel. First, the component itself; second, the bundled stylesheet that handles the base transitions and positioning logic. Without that CSS import, the panel will technically render, but it’ll look like it was designed by someone who had never seen a monitor.

import Offcanvas from 'react-offcanvas';
import 'react-offcanvas/dist/react-offcanvas.css';

That’s the entire dependency surface. No peer requirements beyond React itself (version 16.3+ is sufficient), no global store, no provider component wrapping your app tree. The react-offcanvas getting started path is genuinely that flat, which makes it particularly well-suited to projects where you need to ship a working React slide-out menu today rather than architect one for next quarter.

Building Your First react-offcanvas Component

The mental model for react-offcanvas is straightforward: you control visibility through a boolean state variable, you pass that variable to the isMenuOpened prop, and the component handles the rest. No imperative show() or hide() method calls, no refs, no DOM manipulation. It’s idiomatic React — controlled component pattern, top-to-bottom data flow, exactly as expected.

Here’s a minimal but complete react-offcanvas example that renders a left-side navigation panel toggled by a button:

import React, { useState } from 'react';
import Offcanvas from 'react-offcanvas';
import 'react-offcanvas/dist/react-offcanvas.css';

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Side Panel
      </button>

      <Offcanvas
        isMenuOpened={isOpen}
        position="left"
        effect="push"
      >
        <nav>
          <h2>Navigation</h2>
          <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
          <button onClick={() => setIsOpen(false)}>
            Close
          </button>
        </nav>
      </Offcanvas>
    </div>
  );
}

Notice that the close action is just setIsOpen(false) — the same state setter used to open the panel, called from a button placed inside the panel content. This is intentional: react-offcanvas doesn’t dictate how or where you put the close trigger. You could close it on overlay click, on route change, on a keyboard event, or after a successful form submission. The component is agnostic; your application logic owns the state.

The effect="push" prop tells the component to slide the main page content aside as the panel opens — a classic UX pattern that preserves spatial context for the user. Alternatively, setting effect="overlay" renders the panel above the page content without displacing it, which works better for narrower panels or secondary utility drawers where interrupting the main layout would feel heavy-handed.

react-offcanvas Positioning: Left, Right, Top, and Bottom

One of the underappreciated strengths of react-offcanvas is its flexible positioning system. The position prop accepts four values — "left", "right", "top", and "bottom" — and the library handles the corresponding CSS transform directions automatically. In practice, left and right are used for React side navigation and menu drawers; top and bottom suit notification bars, cookie banners, or mobile action sheets.

Switching positions is a one-prop change, which makes A/B testing your navigation UX genuinely painless. Want to try a right-hand panel for your international audience who reads right-to-left? Change position="left" to position="right". No CSS file edits, no transform recalculations, no hunting for the magic pixel offset that makes the panel sit flush against the viewport edge. The library abstracts all of that.

For applications with multiple panels — say, a left navigation drawer and a right contextual help panel — you simply render two <Offcanvas> instances with separate state variables controlling each. They operate independently, and the library handles stacking correctly as long as you’re sensible about z-index in your custom styles. A quick react-offcanvas tutorial best practice: assign different className props to each instance so you can target them individually in your stylesheet without selector conflicts.

react-offcanvas Customization: Making It Look Like Yours

Out of the box, react-offcanvas ships with functional but minimal default styles — exactly the right call for a component library that doesn’t want to fight your design system. React offcanvas customization happens through a combination of the className prop on the component and CSS overrides targeting the library’s class names. The main wrapper uses .off-canvas-component, the content area uses .off-canvas-component__inner, and the overlay uses .off-canvas-overlay.

/* Custom width and background for your side panel */
.my-side-panel .off-canvas-component__inner {
  width: 320px;
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 2rem;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

/* Darken the overlay */
.my-side-panel .off-canvas-overlay {
  background: rgba(0, 0, 0, 0.65);
}

Then pass your class name to the component: <Offcanvas className="my-side-panel" ...>. This scoping pattern keeps your custom styles from leaking into other Offcanvas instances on the same page and avoids the specificity arms race that haunts projects where global CSS overrides accumulate over months. If you’re using CSS Modules or styled-components, the same principle applies — scope the override to the specific instance’s generated class.

For teams using Tailwind CSS, the recommended approach is to set the panel’s inner content width and background via Tailwind utility classes applied directly to the children you render inside the <Offcanvas> wrapper, then use a thin CSS override just for the .off-canvas-component__inner container dimensions. This hybrid approach plays cleanly with Tailwind’s JIT compiler and avoids the need for @apply hacks or arbitrary value proliferation. The result is a fully styled React overlay panel that matches your design tokens without friction.

Handling State, Overlay Clicks, and Keyboard Accessibility

A common requirement that the basic example doesn’t cover is closing the panel when the user clicks the overlay — the darkened area behind the open panel. react-offcanvas doesn’t fire a built-in callback for this, which sounds like a limitation until you realize the solution is two lines: render a click handler on a wrapper div that sits beneath the Offcanvas component, or use the library’s onMenuOpened and onMenuClosed callback props to synchronize your state with the component’s internal transitions.

<Offcanvas
  isMenuOpened={isOpen}
  position="right"
  effect="overlay"
  onMenuOpened={() => console.log('Panel opened')}
  onMenuClosed={() => setIsOpen(false)}
>
  {/* panel content */}
</Offcanvas>

Keyboard accessibility deserves deliberate attention here. A React side menu that opens on button click should also close when the user presses Escape, and focus should move into the panel when it opens and return to the trigger button when it closes. Neither behavior ships automatically with react-offcanvas — but both are straightforward to implement with a useEffect listening for the keydown event and a useRef pointing at the trigger button for focus restoration.

Adding aria-expanded={isOpen} to your trigger button and aria-hidden={!isOpen} to the panel wrapper gives screen readers the context they need without any additional libraries. These two attributes, combined with the keyboard handler, bring the component to WCAG 2.1 AA conformance for interactive disclosure patterns — which is the minimum bar for any production React side navigation shipped to a general audience.

Real-World react-offcanvas Patterns Worth Stealing

Beyond the standard navigation drawer, react-offcanvas slots cleanly into several high-value UI patterns that appear repeatedly in production applications. Understanding these patterns by name makes it easier to communicate design intent with your team and to search for implementation precedents when you hit edge cases.

• Filter sidebar — common in e-commerce and data-heavy dashboards. The panel opens from the left, contains checkbox groups and range sliders, and applies filters to the main content on close or on each change. The effect="overlay" setting is ideal here because the main content should stay visible for reference.
• Cart drawer — a right-side panel that slides in when a user adds a product to their shopping cart, shows the cart summary, and provides a checkout CTA. This pattern converts better than a redirect to a dedicated cart page in many A/B tests, and react-offcanvas handles the slide-in animation smoothly enough for production use without additional animation libraries.
• Contextual help panel — a narrow right-side drawer triggered by a “?” icon in complex forms or multi-step workflows. It displays inline documentation without navigating the user away from the task. Width customization (width: 280px on the inner container) keeps the main UI usable even with the panel open.

Each of these patterns benefits from the same foundational setup: a single boolean state variable, the <Offcanvas> component with appropriate position and effect props, and CSS scoped to the specific instance. The library’s simplicity is its feature, not its limitation — it’s a chassis, not a finished vehicle, and that’s exactly the right abstraction level for a React panel component that needs to fit into dozens of different design systems.

react-offcanvas vs. Building a Custom Side Panel from Scratch

This question comes up on Reddit and Stack Overflow with reliable frequency, and the honest answer is: it depends on how much custom behavior you need and how much time you’re willing to invest in CSS transitions. A hand-rolled React slide-out menu gives you total control — you own every pixel, every timing function, every z-index decision. But “total control” in CSS often means “total responsibility for debugging that one Safari bug that only appears on iPhone 12 with 120Hz refresh rate enabled.”

react-offcanvas is the right call when your requirements are standard: a panel that slides in from one edge, sits above or pushes the main content, and closes on a state change. It’s the wrong call when you need multi-step animated transitions, gesture-driven drag-to-close behavior, or complex nested panel stacking. In those cases, you’re better served by Floating UI, Framer Motion with a custom panel component, or — if you’re already using it — the offcanvas component built into Headless UI or Material UI.

For the vast majority of React applications in the real world, though, the requirements are standard. A navigation drawer, a filter panel, a cart sidebar — these are solved problems, and reaching for a focused, lightweight library like react-offcanvas over a 300-line custom implementation is a defensible engineering decision. It reduces surface area for bugs, makes the codebase easier for new contributors to understand, and lets you ship the feature in an afternoon rather than a sprint.

Complete Props Reference

react-offcanvas keeps its API surface intentionally small. Understanding every available prop takes about three minutes, which is the right cognitive load for a utility component you want to grab, configure, and move on from.

• isMenuOpened (boolean, required) — Controls panel visibility. Pass your state variable here.
• position (string) — One of "left", "right", "top", "bottom". Defaults to "left".
• effect (string) — "push" displaces main content; "overlay" layers over it. Defaults to "push".
• width (number) — Panel width in pixels for left/right positions. Defaults to 280.
• height (number) — Panel height in pixels for top/bottom positions.
• className (string) — Custom CSS class applied to the root element for scoped style overrides.
• onMenuOpened (function) — Callback fired when the open animation completes.
• onMenuClosed (function) — Callback fired when the close animation completes.

The width prop deserves a special mention: it accepts a raw number (pixels, no unit string), and it’s separate from any CSS width override you might apply. Set it in the prop for left/right panels to ensure the push effect calculates the correct transform offset for the main content displacement. If you set only a CSS width without the prop, the push effect will use the default value and the math will be wrong — the most common source of “the panel opens but the page content only shifts a little bit” bug reports.

For react-offcanvas positioning on responsive layouts, consider managing the position prop dynamically based on a window.innerWidth check inside a useEffect with a resize listener, or better yet, via a useMediaQuery hook from usehooks-ts. This lets the same <Offcanvas> instance render as a bottom sheet on mobile and a left sidebar on desktop — a common progressive enhancement in responsive navigation design.

Next Steps and Further Learning

Once you’re comfortable with the basics of react-offcanvas setup and side panel building, the natural next step is integrating the panel with your application’s routing layer. In React Router v6, you can trigger the panel open state in response to a specific route parameter or a query string flag, making the panel state URL-serializable and therefore shareable and navigable via browser history. This is the pattern used by Figma, Linear, and similar single-page applications where UI state is reflected in the URL for deep-linking purposes.

You should also explore pairing react-offcanvas with a global state manager if your panel needs to be triggered from multiple unrelated parts of the component tree. A single isPanelOpen atom in Zustand or Jotai, or a context value if you prefer staying framework-native, lets any component in the tree open or close the panel without prop drilling. This pattern scales cleanly and avoids the “lifted state that ended up in App.jsx” antipattern that haunts React codebases as they grow.

Finally, consider the performance angle: react-offcanvas renders its children even when the panel is closed (it uses CSS transforms to move the panel off-screen rather than conditional rendering). For panels with expensive child components — large lists, charts, or data tables — wrap the children in a conditional render or a React.lazy boundary so they only mount when the panel is actually open. This is a micro-optimization in most cases, but in low-powered mobile devices or panels with heavy virtualized lists, it makes a measurable difference.

import Offcanvas from 'react-offcanvas';
import 'react-offcanvas/dist/react-offcanvas.css';