Support CoreUI Development

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:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

React Offcanvas Component

React alert component allows build hidden sidebars into your project for navigation, shopping carts.

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.

1<COffcanvas backdrop={false} placement="start" portal={false} 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 custom
8 elements here.
9 </COffcanvasBody>
10</COffcanvas>

Live demo#

Use the buttons below to show and hide an offcanvas component.

  • visible={false} hides content (default)
  • visible or visible={true} shows content
1const [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 or
12 custom elements here.
13 </COffcanvasBody>
14 </COffcanvas>
15 </>
16)

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 viewport
  • placement="top" places offcanvas on the top of the viewport
  • placement="bottom" places offcanvas on the bottom of the viewport

Try 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 or
12 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 or
12 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 or
12 custom elements here.
13 </COffcanvasBody>
14 </COffcanvas>
15 </>
16)

Backdrop#

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 [visibleScrolling, setVisibleScrolling] = useState(false)
2const [visibleWithBackdrop, setVisibleWithBackdrop] = useState(false)
3const [visibleWithBothOptions, setVisibleWithBothOptions] = useState(false)
4return (
5 <>
6 <CButton color="primary" onClick={() => setVisibleScrolling(true)}>Enable body scrolling</CButton>
7 <CButton color="primary" onClick={() => setVisibleWithBackdrop(true)}>Enable backdrop (default)</CButton>
8 <CButton color="primary" onClick={() => setVisibleWithBothOptions(true)}>Enable both scrolling &amp; backdrop</CButton>
9 <COffcanvas backdrop={false} placement="start" scroll visible={visibleScrolling} onHide={() => setVisibleScrolling(false)}>
10 <COffcanvasHeader>
11 <COffcanvasTitle>Offcanvas</COffcanvasTitle>
12 <CCloseButton className="text-reset" onClick={() => setVisibleScrolling(false)}/>
13 </COffcanvasHeader>
14 <COffcanvasBody>
15 <p>Try scrolling the rest of the page to see this option in action.</p>
16 </COffcanvasBody>
17 </COffcanvas>
18 <COffcanvas placement="start" visible={visibleWithBackdrop} onHide={() => setVisibleWithBackdrop(false)}>
19 <COffcanvasHeader>
20 <COffcanvasTitle>Offcanvas</COffcanvasTitle>
21 <CCloseButton className="text-reset" onClick={() => setVisibleWithBackdrop(false)}/>
22 </COffcanvasHeader>
23 <COffcanvasBody>
24 <p>.....</p>
25 </COffcanvasBody>
26 </COffcanvas>
27 <COffcanvas placement="start" scroll visible={visibleWithBothOptions} onHide={() => setVisibleWithBothOptions(false)}>
28 <COffcanvasHeader>
29 <COffcanvasTitle>Offcanvas</COffcanvasTitle>
30 <CCloseButton className="text-reset" onClick={() => setVisibleWithBothOptions(false)}/>
31 </COffcanvasHeader>
32 <COffcanvasBody>
33 <p>Try scrolling the rest of the page to see this option in action.</p>
34 </COffcanvasBody>
35 </COffcanvas>
36 </>
37)

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.

Customizing#

CSS variables#

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};

How to use CSS variables#

1const vars = {
2 '--my-css-var': 10,
3 '--my-another-css-var': "red"
4}
5return <COffcanvas style={vars}>...</COffcanvas>

SASS variables#

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;

API#

COffcanvas#

1import { COffcanvas } from '@coreui/react'
2// or
3import COffcanvas from '@coreui/react-pro/src/components/offcanvas/COffcanvas'
PropertyDescriptionTypeDefault
backdropApply a backdrop on body while offcanvas is open.booleantrue
classNameA string of all className you want applied to the base component.string-
keyboardCloses the offcanvas when escape key is pressedbooleantrue
onHideCallback fired when the component requests to be hidden.() => void-
onShowCallback fired when the component requests to be shown.() => void-
placementComponents placement, there’s no default placement.'start' | 'end' | 'top' | 'bottom'-
portalGenerates modal using createPortal.booleantrue
scrollAllow body scrolling while offcanvas is openbooleanfalse
visibleToggle the visibility of offcanvas component.booleanfalse

COffcanvasBody#

1import { COffcanvasBody } from '@coreui/react'
2// or
3import COffcanvasBody from '@coreui/react-pro/src/components/offcanvas/COffcanvasBody'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-

COffcanvasHeader#

1import { COffcanvasHeader } from '@coreui/react'
2// or
3import COffcanvasHeader from '@coreui/react-pro/src/components/offcanvas/COffcanvasHeader'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-

COffcanvasTitle#

1import { COffcanvasTitle } from '@coreui/react'
2// or
3import COffcanvasTitle from '@coreui/react-pro/src/components/offcanvas/COffcanvasTitle'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-