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.
import Offcanvas from 'react-bootstrap/Offcanvas'Copy import code for the Offcanvas component
When true The offcanvas will automatically shift focus to itself when it
opens, and replace it to the last focused element when it closes.
Generally this should never be set to false as it makes the offcanvas less
accessible to assistive technologies, like screen-readers.
'static' | true | false
Include a backdrop component. Specify 'static' for a backdrop that doesn't
trigger an "onHide" when clicked.
Add an optional extra class name to .offcanvas-backdrop.
When true The offcanvas will prevent focus from leaving the offcanvas while
open. Consider leaving the default value here, as it is necessary to make
the offcanvas work well with assistive technologies, such as screen readers.
Closes the offcanvas when escape key is pressed.
Callback fired before the offcanvas transitions in
Callback fired after the offcanvas finishes transitioning in
Callback fired as the offcanvas begins to transition in
A callback fired when the escape key, if specified in keyboard, is pressed.
Callback fired right before the offcanvas transitions out
Callback fired after the offcanvas finishes transitioning out
Callback fired as the offcanvas begins to transition out
A callback fired when the header closeButton or backdrop is
clicked. Required if either are specified.
A callback fired when the offcanvas is opening.
'start' | 'end' | 'top' | 'bottom'
Which side of the viewport the offcanvas will appear from.
For internal use to render static node from NavbarOffcanvas.
"sm" | "md" | "lg" | "xl" | "xxl"
Hide content outside the viewport from a specified breakpoint and down.
When true The offcanvas will restore focus to previously focused element once
offcanvas is hidden
Options passed to focus function when restoreFocus is set to true
Allow body scrolling while offcanvas is open.
When true The offcanvas will show itself.
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.