The Offcanvas should only contain content or flows which are related to the current page and not replace pages, therefore its complexity level has to be simple. Consider the fullscreen state if you want to focus the users attention to the Offcanvas content.
Offcanvas is responsive per default but the width can be adjusted (the default is 600px or 37.5rem). Content on the Offcanvas is scrollable and has a space5 bounding box.
The following contains a simple example, with a resulting Offcanvas similar to the live examples above.
"left" | "right"Show the Offcanvas on the side of the page: left or right.
booleanMakes the Offcanvas dismissible by the user.
() => voidA function that will be called after the user has dismissed the Offcanvas and the Offcanvas has disappeared.
The Offcanvas supports width styled-system props.
Offcanvas provides a function to dismiss the component with an animation. The
dismiss function is available either through render props or a hook. After the
animation has finished the
onClose callback will be called.