Offcanvas

import Basic from '!!raw-loader!../examples/Offcanvas/Basic'; import Backdrop from '!!raw-loader!../examples/Offcanvas/Backdrop'; import StaticBackdrop from '!!raw-loader!../examples/Offcanvas/StaticBackdrop'; import Responsive from '!!raw-loader!../examples/Offcanvas/Responsive'; import Placement from '!!raw-loader!../examples/Offcanvas/Placement';

Examples

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.

Basic Example

<CodeBlock language="jsx" live> {Basic} </CodeBlock>

Responsive

Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual.

<CodeBlock language="jsx" live> {Responsive} </CodeBlock>

Placement

Offcanvas supports a few different placements:

start places offcanvas on the left of the viewport
end places offcanvas on the right of the viewport
top places offcanvas on the top of the viewport
bottom places offcanvas on the bottom of the viewport

<CodeBlock language="jsx" live noInline> {Placement} </CodeBlock>

Backdrop

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

<CodeBlock language="jsx" live noInline> {Backdrop} </CodeBlock>

Static backdrop

When backdrop is set to static, the offcanvas will not close when clicking outside of it.

<CodeBlock language="jsx" live> {StaticBackdrop} </CodeBlock>

API

OffcanvasHeader

OffcanvasTitle

OffcanvasBody