Angular Offcanvas

Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

Get offer!

On this page

## Examples ### Live demo Use the buttons below to show and hide an offcanvas component.

### Placement There's no default placement for offcanvas components, so you must add one of the modifier props 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

### Backdrop and Scroll 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.

### Static Backdrop With `backdrop` prop set to `static`, the offcanvas will not close when clicking outside of it nor pressing `Esc`.

### Responsive Responsive offcanvas hides the content outside the viewport below the specified breakpoint. Above that breakpoint, the content is displayed as usual.

### Dark offcanvas With `.text-bg-dark` utility class you can change the appearance of your offcanvas component.

## Accessibility Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."` —referencing the offcanvas title— to `c-offcanvas`>. Note that you don’t need to add `role="dialog"` since we already add it automatically.

| name | description | type | default | version | | ---- | ----------- | ---- | ------- | ------- | | `backdrop` | Apply a backdrop on body while offcanvas is visible. | `boolean \| 'static'` | _true_ | `static` 4.3.10+ | `keyboard` | Closes the offcanvas when escape key is pressed. | `boolean` |_true_| | `id` | Html id attr, required for programmatic offcanvas visibility change. | `string` | **required** | | `placement` | Offcanvas placement. | `start` \| `end` \| `top` \| `bottom` |_start_| | `responsive` | Hide the content in an offcanvas below the breakpoint. | `boolean \| sm \| md \| lg \| xl \| xxl` | _true_ | 4.3.10+ | `scroll` | Allow body scrolling while offcanvas is open. | `boolean` |_false_| | `visible` | Toggle the offcanvas visibility. | `boolean` |_undefined_| | `role` | Html `role` for an offcanvas. | `string` |_dialog_| | `aria-modal` | Set `aria-modal` html attr for an offcanvas. | `string` |_true_|

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `visibleChange` | Event emitted on `visible` change. | `boolean` |

### c-offcanvas-body _component_ ### c-offcanvas-header _component_ ### cOffcanvasTitle _directive_ ### cOffcanvasToggle _directive_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `cOffcanvasToggle` | Html element `id` attr of an offcanvas to dismiss. | `string` | **required** |