Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with the offcanvas component.

Interactive Playground

Controls

Placement

Backdrop

Show on Breakpoint

Allow Body Scrolling

Show Close Button

Include Image

Track Events

Event Log

No events logged

Preview

Code

            
            <script>
  let isShown = false;
  
  function toggleOffcanvas() {
    isShown = !isShown;
  }
</script>

<Button onclick={toggleOffcanvas}>
  Toggle Offcanvas
</Button>

<Offcanvas.Root
  placement="start"
  isShown={isShown}
  onShow={handleShow}
  onShown={handleShown}
  onHide={handleHide}
  onHidePrevented={handleHidePrevented}
  onHidden={handleHidden}>
  <Offcanvas.Header isDismissible={true}>
    <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
  </Offcanvas.Header>
  <Offcanvas.Body>
    <p>This is the offcanvas body content. You can place any content here, including forms, text, or other components.</p>
    <div class="d-grid gap-2">
      <Button colorVariant="secondary" onclick={() => isShown = false}>Close</Button>
    </div>
  </Offcanvas.Body>
</Offcanvas.Root>

Basic Example

The Offcanvas component is a sidebar that can be toggled to appear from any edge of the viewport. By default, it appears from the left side (start position).

            
            <Button onclick={toggleOffcanvas}>
  Launch Basic Offcanvas
</Button>

<Offcanvas.Root isShown={showOffcanvas} onHidden={() => showOffcanvas = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>Some text as placeholder. Content can be virtually anything.</p>
        <Button colorVariant="secondary" onclick={() => showOffcanvas = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>

Placement Options

Offcanvas supports four different placement options: start (default, left side), end (right side), top, and bottom.

            
            <Button onclick={() => showPlacementStart = true}>
    Offcanvas Start
</Button>
<Offcanvas.Root placement="start" isShown={showPlacementStart} onHidden={() => showPlacementStart = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas Start</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the left of the screen (or right in RTL languages)</Offcanvas.Body>
</Offcanvas.Root>

<Button onclick={() => showPlacementEnd = true}>
    Offcanvas End
</Button>
<Offcanvas.Root placement="end" isShown={showPlacementEnd} onHidden={() => showPlacementEnd = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas End</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the right of the screen (or left in RTL languages)</Offcanvas.Body>
</Offcanvas.Root>

<Button onclick={() => showPlacementTop = true}>
    Offcanvas Top
</Button>
<Offcanvas.Root placement="top" isShown={showPlacementTop} onHidden={() => showPlacementTop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas Top</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the top of the screen</Offcanvas.Body>
</Offcanvas.Root>

<Button onclick={() => showPlacementBottom = true}>
    Offcanvas Bottom
</Button>
<Offcanvas.Root placement="bottom" isShown={showPlacementBottom} onHidden={() => showPlacementBottom = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas Bottom</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the bottom of the screen</Offcanvas.Body>
</Offcanvas.Root>

Backdrop Options

You can control the behavior of the backdrop with the useBackdrop prop. It accepts three values: true (default, clickable backdrop), "static" (backdrop present but not clickable), or false (no backdrop).

            
            <Offcanvas.Root useBackdrop="static" isShown={showStaticBackdrop} onHidden={() => showStaticBackdrop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Static Backdrop</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>Click the close button or press escape to close this offcanvas. Clicking outside won't close it.</p>
        <Button colorVariant="secondary" onclick={() => showStaticBackdrop = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>

<Offcanvas.Root useBackdrop={true} isShown={showTrueBackdrop} onHidden={() => showTrueBackdrop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>True Backdrop</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>This offcanvas has a backdrop that you can click outside to close it.</p>
    </Offcanvas.Body>
</Offcanvas.Root>

<Offcanvas.Root useBackdrop={false} isShown={showFalseBackdrop} onHidden={() => showFalseBackdrop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>False Backdrop</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>There is no backdrop for this offcanvas. You can still interact with the page content.</p>
        <Button colorVariant="secondary" onclick={() => showFalseBackdrop = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>

Scrollable Body

By default, the Offcanvas component prevents scrolling of the main body when it's open. You can allow body scrolling by setting the isBodyScrollable prop to true.

            
            <Offcanvas.Root isBodyScrollable={true} isShown={showScrollable} onHidden={() => showScrollable = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Scrollable Offcanvas</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>The page body remains scrollable when this offcanvas is open.</p>
        <p>Try scrolling the page while this offcanvas is open.</p>
        <Button colorVariant="secondary" onclick={() => showScrollable = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>

Responsive Behaviors

The Offcanvas component can be configured to behave responsively using the showOnBreakpoint prop. When set, the component will be visible as a regular element above the specified breakpoint, and will behave as an offcanvas below it.

This example will show as a regular sidebar on screens lg and up, but as an offcanvas on smaller screens.

Resize your browser to show the responsive offcanvas toggle.

            
            <Button colorVariant="primary" class="d-lg-none" onclick={() => showResponsive = !showResponsive}>
    Toggle Responsive Offcanvas
</Button>

<Offcanvas.Root showOnBreakpoint="lg" placement="start">
    <Offcanvas.Header>
        <Offcanvas.Title>Responsive Offcanvas</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>This is always visible on lg screens and above, but behaves like a regular offcanvas below lg breakpoint.</p>
        <Button colorVariant="secondary" class="d-lg-none" onclick={() => showResponsive = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>

API Reference

Offcanvas.Root Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`dir`	`'ltr' \| 'rtl'`	`'ltr'`	Text direction, affects the side from which the offcanvas appears
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	Auto-generated	Unique identifier for the offcanvas
`isBodyScrollable`	`boolean`	`false`	When true, allows scrolling the main page body when offcanvas is open
`isKeyboardDismissible`	`boolean`	`true`	When true, allows closing the offcanvas with the Escape key
`isShown`	`boolean`	`false`	Controls the visibility of the offcanvas
`placement`	`'start' \| 'end' \| 'top' \| 'bottom'`	`'start'`	Determines the edge of the screen from which the offcanvas appears
`showOnBreakpoint`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	`undefined`	Makes the offcanvas visible as a regular element above the specified breakpoint
`useBackdrop`	`'static' \| boolean`	`true`	Controls backdrop behavior: true (default, clickable), "static" (not clickable), false (no backdrop)
`onHide`	`EventListener`	-	Callback when the offcanvas begins hiding
`onHidePrevented`	`EventListener`	-	Callback when the offcanvas is shown, its backdrop is static and a click outside of the offcanvas is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
`onHidden`	`EventListener`	-	Callback when the offcanvas has finished hiding
`onShow`	`EventListener`	-	Callback when the offcanvas begins showing
`onShown`	`EventListener`	-	Callback when the offcanvas has finished showing

Offcanvas.Header Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`isDismissible`	`boolean`	`false`	When true, displays a close button in the header

Offcanvas.Title Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`5`	Heading level to use for the title (h1-h6)

Offcanvas.Body Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element

CSS Classes

The component applies Bootstrap's offcanvas classes based on the provided props:

offcanvas - Base class for the Offcanvas component
offcanvas-[breakpoint] - Applied when showOnBreakpoint is set
offcanvas-[placement] - Position classes (start, end, top, bottom)
show - Applied when the offcanvas is visible
offcanvas-header - Applied to Offcanvas.Header components
offcanvas-title - Applied to Offcanvas.Title components
offcanvas-body - Applied to Offcanvas.Body components
offcanvas-backdrop - Applied to the backdrop when enabled

Responsive Behavior

The Offcanvas component can be configured for responsive behavior:

When showOnBreakpoint is set, the component appears as a regular element on screens at or above the specified breakpoint
On screens below the breakpoint, it behaves as a regular offcanvas that must be toggled to appear
This enables creating responsive sidebar-like layouts that collapse into an offcanvas on smaller screens