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.

On this page

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.

Resize your browser to show the responsive offcanvas toggle.

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'

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`	-
dark	Sets a darker color scheme.	`boolean`	-
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

COffcanvasBody#

import { COffcanvasBody } from '@coreui/react'
// or
import 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`	-

COffcanvasHeader#

import { COffcanvasHeader } from '@coreui/react'
// or
import 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`	-

COffcanvasTitle#

import { COffcanvasTitle } from '@coreui/react'
// or
import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle'

Property	Description	Type	Default
as	Component 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<...>)`	-
className	A string of all className you want applied to the component.	`string`	-