Offcanvas

    Build hidden sidebars into your project for navigation, shopping carts, and more.

    Examples

    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.

    Basic Example

    Placement

    Offcanvas supports a few different placements:

    • start places offcanvas on the left of the viewport
    • end places offcanvas on the right of the viewport
    • top places offcanvas on the top of the viewport
    • bottom places offcanvas on the bottom of the viewport

    Backdrop

    Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the scroll prop to toggle <body> scrolling and the backdrop prop to toggle the backdrop.

    API

    import Offcanvas from 'react-bootstrap/Offcanvas'Copy import code for the Offcanvas component
    NameTypeDefaultDescription
    aria-labelledby
    string
    autoFocus
    boolean
    true

    When true The offcanvas will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the offcanvas less accessible to assistive technologies, like screen-readers.

    backdrop
    boolean
    true

    Include a backdrop component.

    backdropClassName
    string

    Add an optional extra class name to .offcanvas-backdrop.

    container
    any
    enforceFocus
    boolean
    true

    When true The offcanvas will prevent focus from leaving the offcanvas while open. Consider leaving the default value here, as it is necessary to make the offcanvas work well with assistive technologies, such as screen readers.

    keyboard
    boolean
    true

    Closes the offcanvas when escape key is pressed.

    onEnter
    function

    Callback fired before the offcanvas transitions in

    onEntered
    function

    Callback fired after the offcanvas finishes transitioning in

    onEntering
    function

    Callback fired as the offcanvas begins to transition in

    onEscapeKeyDown
    function

    A callback fired when the escape key, if specified in keyboard, is pressed.

    onExit
    function

    Callback fired right before the offcanvas transitions out

    onExited
    function

    Callback fired after the offcanvas finishes transitioning out

    onExiting
    function

    Callback fired as the offcanvas begins to transition out

    onHide
    function

    A callback fired when the header closeButton or backdrop is clicked. Required if either are specified.

    onShow
    function

    A callback fired when the offcanvas is opening.

    placement
    'start' | 'end' | 'top' | 'bottom'
    'start'

    Which side of the viewport the offcanvas will appear from.

    restoreFocus
    boolean
    true

    When true The offcanvas will restore focus to previously focused element once offcanvas is hidden

    restoreFocusOptions
    shape

    Options passed to focus function when restoreFocus is set to true

    scroll
    boolean
    false

    Allow body scrolling while offcanvas is open.

    show
    boolean
    false

    When true The offcanvas will show itself.

    bsPrefix
    string
    'offcanvas'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    OffcanvasHeaderview source file

    import OffcanvasHeader from 'react-bootstrap/OffcanvasHeader'Copy import code for the OffcanvasHeader component
    NameTypeDefaultDescription
    closeButton
    boolean
    false

    Specify whether the Component should contain a close button

    closeLabel
    string
    'Close'

    Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.

    closeVariant
    'white'

    Sets the variant for close button.

    onHide
    function

    A Callback fired when the close button is clicked. If used directly inside a Offcanvas component, the onHide will automatically be propagated up to the parent Offcanvas onHide.

    bsPrefix
    string
    'offcanvas-header'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    OffcanvasTitleview source file

    import OffcanvasTitle from 'react-bootstrap/OffcanvasTitle'Copy import code for the OffcanvasTitle component
    NameTypeDefaultDescription
    as
    elementType
    <DivStyledAsH5>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'offcanvas-title'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    OffcanvasBodyview source file

    import OffcanvasBody from 'react-bootstrap/OffcanvasBody'Copy import code for the OffcanvasBody component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'offcanvas-body'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    ;