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.
Offcanvas Header
Content for the offcanvas goes here. You can place just about any CoreUI component or custom elements here.
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 viewportplacement="top"places offcanvas on the top of the viewportplacement="bottom"places offcanvas on the bottom of the viewport
Offcanvas Header
Content for the offcanvas goes here. You can place just about any CoreUI component or custom elements here.
Offcanvas Header
Content for the offcanvas goes here. You can place just about any CoreUI component or custom elements here.
Offcanvas Header
Content for the offcanvas goes here. You can place just about any CoreUI component or custom elements here.
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.
Offcanvas Header
Try scrolling the rest of the page to see this option in action.
Offcanvas Header
Try scrolling the rest of the page to see this option in action.
Static Backdrop
With backdrop prop set to static, the offcanvas will not close when clicking outside of it nor pressing Esc.
Offcanvas Header
I will not close if you try to click outside of me or to press escape key.
Responsive
Responsive offcanvas hides the content outside the viewport below the specified breakpoint. Above that breakpoint, the content is displayed as usual.
Responsive offcanvas Header
This is content within an offcanvas with responsive="lg" property.
Dark offcanvas
With .text-bg-dark utility class you can change the appearance of your offcanvas component.
Dark Offcanvas Header
Content for the dark offcanvas goes here.
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.
API reference
Offcanvas Module
import { OffcanvasModule } from '@coreui/angular';
@NgModule({
imports: [OffcanvasModule,]
})
export class AppModule() { }
c-offcanvas
component
Inputs
| name | description | type | default | version |
|---|---|---|---|---|
backdrop |
Apply a backdrop on body while offcanvas is visible. | boolean | 'static' |
true | static |
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 | |
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 |