# Angular Offcanvas Component

> Angular Offcanvas component allows to build hidden sidebars into your project for navigation, shopping carts, etc.

## 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`.

### Portal

By default, `c-offcanvas` renders in place in the DOM, moved on top of everything else purely through `position: fixed` and stacking. When an ancestor establishes its own containing block (e.g. via `transform`, `filter`, or `perspective`), it traps that fixed positioning and clips the offcanvas. Set the `portal` input to move the offcanvas's host element into `container` (an `Element`, a function returning one, or `document.body` by default) while it's visible, and restore it to its original position on close.

### 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 while the offcanvas is open.

When the offcanvas closes, focus returns to the `cOffcanvasToggle` that opened it. Without such a toggle, or when it is hidden or disabled, focus returns to the element that had it when the offcanvas opened. Focus moved to another element outside the offcanvas before it closes stays there.

## API reference

### Offcanvas Module

```typescript
import { OffcanvasModule } from '@coreui/angular';

@NgModule({
    imports: [OffcanvasModule,]
})
export class AppModule() { }
```

### c-offcanvas
_component_

```jsx
import { OffcanvasComponent } from '@coreui/angular'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaModal` | `boolean` | `true` | aria-modal attribute rendered while the offcanvas is open |
| `backdrop` | `boolean \| 'static'` | `true` | Apply a backdrop on the body while offcanvas is open. |
| `container` | `Element \| object \| null` | `document.body` | Appends the offcanvas to a specific element. You can pass an HTML element or function that returns a single element. By default, `document.body`. |
| `dark` | `boolean` | `false` | Sets a darker color scheme. If the colorScheme is set to 'dark', the dark theme will be applied. |
| `id` | `string` | ``offcanvas-${this.placement()}-${nextId++}`` | Html id attribute, required for programmatic visibility change. |
| `keyboard` | `boolean` | `true` | Closes the offcanvas when the escape key is pressed |
| `placement` | `string` | `'start'` | Offcanvas placement |
| `portal` | `boolean` | `false` | Generates offcanvas using a portal |
| `responsive` | `boolean \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | `true` | Responsive offcanvas property hides content outside the viewport from a specified breakpoint and down. |
| `role` | `string` | `'dialog'` | Role attribute rendered while the offcanvas is open |
| `scroll` | `boolean` | `false` | Allow body scrolling while offcanvas is visible. |
| `visible` | `boolean` | `false` | Toggle the visibility of offcanvas component. |

### Events

| Name | Description |
| --- | --- |
| `visibleChange` | Event triggered on visible change. |

### c-offcanvas-body
_component_

```jsx
import { OffcanvasBodyComponent } from '@coreui/angular'
```

### c-offcanvas-header
_component_

```jsx
import { OffcanvasHeaderComponent } from '@coreui/angular'
```

### cOffcanvasTitle
_directive_

```jsx
import { OffcanvasTitleDirective } from '@coreui/angular'
```

### cOffcanvasToggle
_directive_

```jsx
import { OffcanvasToggleDirective } from '@coreui/angular'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `cOffcanvasToggle` | `string` | `undefined` | Html id attr of offcanvas to toggle. |