React Offcanvas Component
Offcanvas
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
React alert component allows build hidden sidebars into your project for navigation, shopping carts.
Other Frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
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.
Offcanvas
Live demo#
Use the buttons below to show and hide an offcanvas component.
visible={false}hides content (default)visibleorvisible={true}shows content
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.
Offcanvas with body scrolling
Body scrolling and backdrop#
You can also enable <body> scrolling with a visible backdrop.
Backdrop with scrolling
Static backdrop#
If you set a backdrop to static, your React offcanvas component will not close when clicking outside of it.
Backdrop with scrolling
Dark offcanvas#
Change the appearance of offcanvases with dark boolean property to better match them to different contexts like dark navbars.
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.
Responsive offcanvas
.offcanvas-lg.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 viewportplacement="top"places offcanvas on the top of the viewportplacement="bottom"places offcanvas on the bottom of the viewport
Try the top, right, and bottom examples out below.
Offcanvas
Offcanvas
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.