CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
React alert component allows build hidden sidebars into your project for navigation, shopping carts.
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
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.
1<COffcanvas backdrop={false} placement="start" visible={true}>2 <COffcanvasHeader>3 <COffcanvasTitle>Offcanvas</COffcanvasTitle>4 <CCloseButton className="text-reset" />5 </COffcanvasHeader>6 <COffcanvasBody>7 Content for the offcanvas goes here. You can place just about any Bootstrap component or custom8 elements here.9 </COffcanvasBody>10</COffcanvas>
Use the buttons below to show and hide an offcanvas component.
visible={false}
hides content (default)visible
or visible={true}
shows content1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(true)}>Toggle offcanvas</CButton>5 <COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>6 <COffcanvasHeader>7 <COffcanvasTitle>Offcanvas</COffcanvasTitle>8 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />9 </COffcanvasHeader>10 <COffcanvasBody>11 Content for the offcanvas goes here. You can place just about any Bootstrap component or12 custom elements here.13 </COffcanvasBody>14 </COffcanvas>15 </>16)
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.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(true)}>Enable body scrolling</CButton>5 <COffcanvas backdrop={false} placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>6 <COffcanvasHeader>7 <COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>8 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />9 </COffcanvasHeader>10 <COffcanvasBody>11 Try scrolling the rest of the page to see this option in action.12 </COffcanvasBody>13 </COffcanvas>14 </>15)
You can also enable <body>
scrolling with a visible backdrop.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(true)}>Enable both scrolling & backdrop</CButton>5 <COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>6 <COffcanvasHeader>7 <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>8 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />9 </COffcanvasHeader>10 <COffcanvasBody>11 Try scrolling the rest of the page to see this option in action.12 </COffcanvasBody>13 </COffcanvas>14 </>15)
If you set a backdrop
to static
, your React offcanvas component will not close when clicking outside of it.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(true)}>Toggle static offcanvas</CButton>5 <COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>6 <COffcanvasHeader>7 <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>8 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />9 </COffcanvasHeader>10 <COffcanvasBody>11 I will not close if you click outside of me.12 </COffcanvasBody>13 </COffcanvas>14 </>15)
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.
This is content within an .offcanvas-lg
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton className="d-lg-none" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>5 <CAlert className="d-none d-lg-block" color="info">Resize your browser to show the responsive offcanvas toggle.</CAlert>6 <COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>7 <COffcanvasHeader>8 <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>9 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />10 </COffcanvasHeader>11 <COffcanvasBody>12 This is content within an <code>.offcanvas-lg</code>.13 </COffcanvasBody>14 </COffcanvas>15 </>16)
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 viewportTry the top, right, and bottom examples out below.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(true)}>Toggle top offcanvas</CButton>5 <COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>6 <COffcanvasHeader>7 <COffcanvasTitle>Offcanvas</COffcanvasTitle>8 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />9 </COffcanvasHeader>10 <COffcanvasBody>11 Content for the offcanvas goes here. You can place just about any Bootstrap component or12 custom elements here.13 </COffcanvasBody>14 </COffcanvas>15 </>16)
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(true)}>Toggle right offcanvas</CButton>5 <COffcanvas placement="right" visible={visible} onHide={() => setVisible(false)}>6 <COffcanvasHeader>7 <COffcanvasTitle>Offcanvas</COffcanvasTitle>8 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />9 </COffcanvasHeader>10 <COffcanvasBody>11 Content for the offcanvas goes here. You can place just about any Bootstrap component or12 custom elements here.13 </COffcanvasBody>14 </COffcanvas>15 </>16)
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(true)}>Toggle bottom offcanvas</CButton>5 <COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>6 <COffcanvasHeader>7 <COffcanvasTitle>Offcanvas</COffcanvasTitle>8 <CCloseButton className="text-reset" onClick={() => setVisible(false)} />9 </COffcanvasHeader>10 <COffcanvasBody>11 Content for the offcanvas goes here. You can place just about any Bootstrap component or12 custom elements here.13 </COffcanvasBody>14 </COffcanvas>15 </>16)
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.
React offcanvas uses local CSS variables on .offcanvas
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
1--cui-offcanvas-width: #{$offcanvas-horizontal-width};2--cui-offcanvas-height: #{$offcanvas-vertical-height};3--cui-offcanvas-padding-x: #{$offcanvas-padding-x};4--cui-offcanvas-padding-y: #{$offcanvas-padding-y};5--cui-offcanvas-color: #{$offcanvas-color};6--cui-offcanvas-bg: #{$offcanvas-bg-color};7--cui-offcanvas-border-width: #{$offcanvas-border-width};8--cui-offcanvas-border-color: #{$offcanvas-border-color};9--cui-offcanvas-box-shadow: #{$offcanvas-box-shadow};
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <COffcanvas style={vars}>...</COffcanvas>
1$offcanvas-padding-y: $modal-inner-padding;2$offcanvas-padding-x: $modal-inner-padding;3$offcanvas-horizontal-width: 400px;4$offcanvas-vertical-height: 30vh;5$offcanvas-transition-duration: .3s;6$offcanvas-border-color: $modal-content-border-color;7$offcanvas-border-width: $modal-content-border-width;8$offcanvas-title-line-height: $modal-title-line-height;9$offcanvas-bg-color: $modal-content-bg;10$offcanvas-color: $modal-content-color;11$offcanvas-box-shadow: $modal-content-box-shadow-xs;12$offcanvas-backdrop-bg: $modal-backdrop-bg;13$offcanvas-backdrop-opacity: $modal-backdrop-opacity;
1import { COffcanvas } from '@coreui/react'2// or3import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
Property | Description | Type | Default |
---|---|---|---|
backdrop | Apply a backdrop on body while offcanvas is open. | boolean | 'static' | true |
className | A string of all className you want applied to the base component. | string | - |
keyboard | Closes the offcanvas when escape key is pressed. | boolean | true |
onHide | Callback fired when the component requests to be hidden. | () => void | - |
onShow | Callback fired when the component requests to be shown. | () => void | - |
placement | Components placement, there’s no default placement. | 'start' | 'end' | 'top' | 'bottom' | - |
portal | Generates modal using createPortal. | boolean | false |
responsive 4.6.0+ | Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. | boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | true |
scroll | Allow body scrolling while offcanvas is open | boolean | false |
visible | Toggle the visibility of offcanvas component. | boolean | false |
1import { COffcanvasBody } from '@coreui/react'2// or3import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBody'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
1import { COffcanvasHeader } from '@coreui/react'2// or3import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasHeader'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
1import { COffcanvasTitle } from '@coreui/react'2// or3import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |