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 thebody element is disabled when an offcanvas and its backdrop are visible. Use thescroll property to toggle body scrolling andbackdrop 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
Withbackdrop prop set tostatic, the offcanvas will not close when clicking outside of it nor pressingEsc.
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 withresponsive="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 addaria-labelledby="..." —referencing the offcanvas title— toc-offcanvas>. Note that you don’t need to addrole="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 | Htmlrole for an offcanvas. | string | dialog | |
aria-modal | Setaria-modal html attr for an offcanvas. | string | true |
Outputs
| name | description | type |
|---|---|---|
visibleChange | Event emitted onvisible change. | boolean |
c-offcanvas-body
component
c-offcanvas-header
component
cOffcanvasTitle
directive
cOffcanvasToggle
directive
Inputs
| name | description | type | default |
|---|---|---|---|
cOffcanvasToggle | Html elementid attr of an offcanvas to dismiss. | string | required |