---
title: React Offcanvas Component
name: Offcanvas
description: React alert component allows build hidden sidebars into your project for navigation, shopping carts.
route: /components/offcanvas/
other_frameworks: offcanvas
---

## Examples

### Offcanvas components

Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.

<ExampleSnippet
  className="docs-example-offcanvas bg-body-tertiary p-0 overflow-hidden"
  component="OffcanvasExample"
  componentName="React Offcanvas"
/>

### Live demo

Use the buttons below to show and hide an offcanvas component.

- `visible={false}` hides content (default)
- `visible` or `visible={true}` shows content

<ExampleSnippet component="OffcanvasLiveExample" componentName="React Offcanvas" />

### Body scrolling

Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle `<body>` scrolling and backdrop to toggle the backdrop.

<ExampleSnippet component="OffcanvasBodyScrollingExample" componentName="React Offcanvas" />

### Body scrolling and backdrop

You can also enable `<body>` scrolling with a visible backdrop.

<ExampleSnippet
  component="OffcanvasBodyScrollingAndBackdropExample"
  componentName="React Offcanvas"
/>

### Static backdrop

If you set a `backdrop` to `static`, your React offcanvas component will not close when clicking outside of it.

<ExampleSnippet component="OffcanvasStaticBackdropExample" componentName="React Offcanvas" />

## Dark offcanvas

Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars.

<ExampleSnippet
  className="docs-example-offcanvas bg-body-secondary p-0 overflow-hidden"
  component="OffcanvasDarkExample"
  componentName="React Offcanvas"
/>

## Responsive

Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down.
Above that breakpoint, the contents within will behave as usual.
For example, `responsive="lg"` hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

<ExampleSnippet component="OffcanvasResponsiveExample" componentName="React Offcanvas" />

## Placement

There's no default placement for offcanvas components, so you must add one of the modifier classes below;

- `placement="start"` places offcanvas on the left of the viewport (shown above)
- `placement="end"` places offcanvas on the right of the viewport
- `placement="top"` places offcanvas on the top of the viewport
- `placement="bottom"` places offcanvas on the bottom of the viewport

Try the top, right, and bottom examples out below.

<ExampleSnippet component="OffcanvasPlacementTopExample" componentName="React Offcanvas" />

<ExampleSnippet component="OffcanvasPlacementRightExample" componentName="React Offcanvas" />

<ExampleSnippet component="OffcanvasPlacementBottomExample" componentName="React Offcanvas" />

## Accessibility

Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `<COffcanvas>`. Note that you don’t need to add `role="dialog"` since we already add it automatically.

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;COffcanvas /&gt;](./api/#coffcanvas)
- [&lt;COffcanvasBody /&gt;](./api/#coffcanvasbody)
- [&lt;COffcanvasHeader /&gt;](./api/#coffcanvasheader)
- [&lt;COffcanvasTitle /&gt;](./api/#coffcanvastitle)
