Offcanvas (offcanvas)

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

🔗 External documentation.

                        type: string
enum:
    - offcanvas-sm
    - offcanvas-md
    - offcanvas-lg
    - offcanvas-xl
    - offcanvas-xxl

                      

                        type: string
enum:
    - 'false'
    - static

                      

                        type: boolean

                      

                        type: integer
enum:
    - 1
    - 2
    - 3
    - 4
    - 5
    - 6

                      

                        type: string

                      

            id: offcanvas
label: Offcanvas
description: 'Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.'
group: Dialog
homepage: 'https://getbootstrap.com/docs/5.3/components/offcanvas/'
variants:
    start:
        id: start
        label: Start
    end:
        id: end
        label: End
    top:
        id: top
        label: Top
    bottom:
        id: bottom
        label: Bottom
slots:
    title:
        id: title
        label: Title
        description: 'Offcanvas title.'
    body:
        id: body
        label: Body
        description: 'The content of the offcanvas.'
props:
    responsive:
        id: responsive
        label: Responsive
        description: 'Hide content in offcanvas below the selected breakpoint. Above that breakpoint, the contents within will behave as usual.'
        schema:
            type: string
            enum:
                - offcanvas-sm
                - offcanvas-md
                - offcanvas-lg
                - offcanvas-xl
                - offcanvas-xxl
    backdrop:
        id: backdrop
        label: Backdrop
        description: 'When backdrop is set to static, the offcanvas will not close when clicking outside of it.'
        schema:
            type: string
            enum:
                - 'false'
                - static
    scroll:
        id: scroll
        label: 'Body scrolling'
        description: 'By default, body scrolling is disabled.'
        schema:
            type: boolean
    heading_level:
        id: heading_level
        label: 'Heading level'
        description: 'Heading level of the offcanvas.'
        schema:
            type: integer
            enum:
                - 1
                - 2
                - 3
                - 4
                - 5
                - 6
    offcanvas_id:
        id: offcanvas_id
        label: ID
        description: 'ID used by external buttons to toggle the visibility. Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': offcanvas
            title: Offcanvas
            body: 'Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.'
            heading_level: 5