React Bootstrap Offcanvas Component
Offcanvas with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use the React Bootstrap Offcanvas component from CoreUI to create hidden sidebars and sliding panels for navigation, shopping carts, or any additional UI element.
React Bootstrap Offcanvas examples#
The React Bootstrap Offcanvas component allows you to build sidebar-like panels that slide into view from any edge of the screen. These panels are great for navigation menus, shopping carts, and more.
Static offcanvas component#
Here’s a React Bootstrap Offcanvas that is shown by default using visible={true}. It includes a header with a close button and a padded body.
Offcanvas
Live demo#
Click the buttons to toggle visibility of the offcanvas.
Offcanvas
Scrollable body#
Use the scroll prop to allow page scrolling while the offcanvas is visible. Combine it with backdrop to control overlay behavior.
Offcanvas with body scrolling
Scrollable body with backdrop#
Backdrop with scrolling
Static backdrop#
Prevent closing the React Bootstrap Offcanvas on backdrop click by setting backdrop="static".
Backdrop with scrolling
Dark variant#
Add the dark prop to match the React Bootstrap Offcanvas with dark themes or layouts.
Offcanvas
Responsive behavior#
Use the responsive prop to show the offcanvas below specific breakpoints (e.g., responsive="lg"). Above that breakpoint, the offcanvas behaves as a regular visible container.
Responsive offcanvas
.offcanvas-lg.Placement options for React Bootstrap Offcanvas#
Choose the offcanvas placement with the placement prop:
placement="start"– leftplacement="end"– rightplacement="top"– topplacement="bottom"– bottom
Examples:
Offcanvas
Offcanvas
Offcanvas
Accessibility considerations#
React Bootstrap Offcanvas behaves like a modal. Use aria-labelledby to link the offcanvas title to assistive technologies. CoreUI automatically adds role="dialog" and other ARIA attributes for accessibility.
API reference#
Review the full API for the React Bootstrap Offcanvas component and its parts: