# 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. ```html import React from 'react' import { CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasExample = () => { return ( Offcanvas Content for the offcanvas goes here. You can place just about any React component or custom elements here. ) } ``` ### Live demo Use the buttons below to show and hide an offcanvas component. - `visible={false}` hides content (default) - `visible` or `visible={true}` shows content ```html import React, { useState } from 'react' import { CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasLiveExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Toggle offcanvas setVisible(false)}> Offcanvas setVisible(false)} /> Content for the offcanvas goes here. You can place just about any React component or custom elements here. ) } ``` ### Body scrolling Scrolling the `` element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle `` scrolling and backdrop to toggle the backdrop. ```html import React, { useState } from 'react' import { CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasBodyScrollingExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Enable body scrolling setVisible(false)} > Offcanvas with body scrolling setVisible(false)} /> Try scrolling the rest of the page to see this option in action. ) } ``` ### Body scrolling and backdrop You can also enable `` scrolling with a visible backdrop. ```html import React, { useState } from 'react' import { CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasBodyScrollingAndBackdropExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Enable both scrolling & backdrop setVisible(false)} > Backdrop with scrolling setVisible(false)} /> Try scrolling the rest of the page to see this option in action. ) } ``` ### Static backdrop If you set a `backdrop` to `static`, your React offcanvas component will not close when clicking outside of it. ```html import React, { useState } from 'react' import { CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasStaticBackdropExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Toggle static offcanvas setVisible(false)} > Backdrop with scrolling setVisible(false)} /> Try scrolling the rest of the page to see this option in action. ) } ``` ## Dark offcanvas Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars. ```html import React from 'react' import { CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasDarkExample = () => { return ( Offcanvas Content for the offcanvas goes here. You can place just about any React component or custom elements here. ) } ``` ## 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. ```html import React, { useState } from 'react' import { CAlert, CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasResponsiveExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Toggle offcanvas Resize your browser to show the responsive offcanvas toggle. setVisible(false)} > Responsive offcanvas setVisible(false)} /> This is content within an .offcanvas-lg. ) } ``` ## 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. ```html import React, { useState } from 'react' import { CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasPlacementTopExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Toggle top offcanvas setVisible(false)}> Offcanvas setVisible(false)} /> Content for the offcanvas goes here. You can place just about any React component or custom elements here. ) } ``` ```html import React, { useState } from 'react' import { CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasPlacementRightExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Toggle right offcanvas setVisible(false)}> Offcanvas setVisible(false)} /> Content for the offcanvas goes here. You can place just about any React component or custom elements here. ) } ``` ```html import React, { useState } from 'react' import { CButton, CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, } from '@coreui/react' export const OffcanvasPlacementBottomExample = () => { const [visible, setVisible] = useState(false) return ( <> setVisible(true)}> Toggle bottom offcanvas setVisible(false)}> Offcanvas setVisible(false)} /> Content for the offcanvas goes here. You can place just about any React component or custom elements here. ) } ``` ## Accessibility Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to ``. Note that you don’t need to add `role="dialog"` since we already add it automatically. ## API Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. - [<COffcanvas />](./api/#coffcanvas) - [<COffcanvasBody />](./api/#coffcanvasbody) - [<COffcanvasHeader />](./api/#coffcanvasheader) - [<COffcanvasTitle />](./api/#coffcanvastitle)