React Offcanvas Component

Offcanvas

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.

<COffcanvas backdrop={false} placement="start" visible={true}>
<COffcanvasHeader>
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
<CCloseButton className="text-reset" />
</COffcanvasHeader>
<COffcanvasBody>
Content for the offcanvas goes here. You can place just about any React component or custom
elements here.
</COffcanvasBody>
</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
const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
<COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
Content for the offcanvas goes here. You can place just about any React component or
custom elements here.
</COffcanvasBody>
</COffcanvas>
</>
)

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.

const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" onClick={() => setVisible(true)}>Enable body scrolling</CButton>
<COffcanvas backdrop={false} placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
Try scrolling the rest of the page to see this option in action.
</COffcanvasBody>
</COffcanvas>
</>
)

Body scrolling and backdrop#

You can also enable <body> scrolling with a visible backdrop.

const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" onClick={() => setVisible(true)}>Enable both scrolling &amp; backdrop</CButton>
<COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
Try scrolling the rest of the page to see this option in action.
</COffcanvasBody>
</COffcanvas>
</>
)

Static backdrop#

If you set a backdrop to static, your React offcanvas component will not close when clicking outside of it.

const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" onClick={() => setVisible(true)}>Toggle static offcanvas</CButton>
<COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
I will not close if you click outside of me.
</COffcanvasBody>
</COffcanvas>
</>
)

Dark offcanvas#

Change the appearance of offcanvases with dark boolean property to better match them to different contexts like dark navbars.

<COffcanvas backdrop={false} dark placement="start" visible={true}>
<COffcanvasHeader>
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
<CCloseButton className="text-reset" />
</COffcanvasHeader>
<COffcanvasBody>
Content for the offcanvas goes here. You can place just about any React component or custom
elements here.
</COffcanvasBody>
</COffcanvas>

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.

const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" className="d-lg-none" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
<CAlert className="d-none d-lg-block" color="info">Resize your browser to show the responsive offcanvas toggle.</CAlert>
<COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
This is content within an <code>.offcanvas-lg</code>.
</COffcanvasBody>
</COffcanvas>
</>
)

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.

const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" onClick={() => setVisible(true)}>Toggle top offcanvas</CButton>
<COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
Content for the offcanvas goes here. You can place just about any React component or
custom elements here.
</COffcanvasBody>
</COffcanvas>
</>
)
const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" onClick={() => setVisible(true)}>Toggle right offcanvas</CButton>
<COffcanvas placement="right" visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
Content for the offcanvas goes here. You can place just about any React component or
custom elements here.
</COffcanvasBody>
</COffcanvas>
</>
)
const [visible, setVisible] = useState(false)
return (
<>
<CButton color="primary" onClick={() => setVisible(true)}>Toggle bottom offcanvas</CButton>
<COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
<COffcanvasHeader>
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
</COffcanvasHeader>
<COffcanvasBody>
Content for the offcanvas goes here. You can place just about any React component or
custom elements here.
</COffcanvasBody>
</COffcanvas>
</>
)

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.

--cui-offcanvas-zindex: #{$zindex-offcanvas};
--cui-offcanvas-width: #{$offcanvas-horizontal-width};
--cui-offcanvas-height: #{$offcanvas-vertical-height};
--cui-offcanvas-padding-x: #{$offcanvas-padding-x};
--cui-offcanvas-padding-y: #{$offcanvas-padding-y};
--cui-offcanvas-color: #{$offcanvas-color};
--cui-offcanvas-bg: #{$offcanvas-bg-color};
--cui-offcanvas-border-width: #{$offcanvas-border-width};
--cui-offcanvas-border-color: #{$offcanvas-border-color};
--cui-offcanvas-box-shadow: #{$offcanvas-box-shadow};
--cui-offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--cui-offcanvas-title-line-height: #{$offcanvas-title-line-height};

How to use CSS variables#

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

SASS variables#

$offcanvas-padding-y: $modal-inner-padding !default;
$offcanvas-padding-x: $modal-inner-padding !default;
$offcanvas-horizontal-width: 400px !default;
$offcanvas-vertical-height: 30vh !default;
$offcanvas-transition-duration: .3s !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: var(--cui-body-bg) !default;
$offcanvas-color: var(--cui-body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;

API#

COffcanvas#

import { COffcanvas } from '@coreui/react'
// or
import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
PropertyDescriptionTypeDefault
backdropApply a backdrop on body while offcanvas is open.boolean | 'static'true
classNameA string of all className you want applied to the base component.string-
darkSets a darker color scheme.boolean-
keyboardCloses the offcanvas when escape key is pressed.booleantrue
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.booleanfalse
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
scrollAllow body scrolling while offcanvas is openbooleanfalse
visibleToggle the visibility of offcanvas component.booleanfalse

COffcanvasBody#

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

COffcanvasHeader#

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

COffcanvasTitle#

import { COffcanvasTitle } from '@coreui/react'
// or
import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle'
PropertyDescriptionTypeDefault
asComponent used for the root node. Either a string to use a HTML element or a component.(ElementType & 'symbol') | (ElementType & 'object') | (ElementType & 'h5') | (ElementType & 'slot') | (ElementType & 'style') | ... 174 more ... | (ElementType & FunctionComponent<...>)-
classNameA string of all className you want applied to the component.string-