Bootstrap React Offcanvas

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

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.

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 React 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 React 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 React 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 React 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 React 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.

API#

COffcanvas#

1import { COffcanvas } from '@coreui/bootstrap-react'
2// or
3import COffcanvas from '@coreui/bootstrap-react/src/components/offcanvas/COffcanvas'

Property	Description	Type	Default
backdrop	Apply a backdrop on body while offcanvas is open.	`boolean`	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`	true
scroll	Allow body scrolling while offcanvas is open	`boolean`	false
visible	Toggle the visibility of offcanvas component.	`boolean`	false

COffcanvasBody#

1import { COffcanvasBody } from '@coreui/bootstrap-react'
2// or
3import COffcanvasBody from '@coreui/bootstrap-react/src/components/offcanvas/COffcanvasBody'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-

COffcanvasHeader#

1import { COffcanvasHeader } from '@coreui/bootstrap-react'
2// or
3import COffcanvasHeader from '@coreui/bootstrap-react/src/components/offcanvas/COffcanvasHeader'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-

COffcanvasTitle#

1import { COffcanvasTitle } from '@coreui/bootstrap-react'
2// or
3import COffcanvasTitle from '@coreui/bootstrap-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>`	-