Offcanvas
An offcanvas is a hidden sidebar that can be revealed and hidden via a toggle button.
Example
Default offcanvas can be created using the `ng0Offcanvas` directive.
Offcanvas example
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
offcanvas-example.component.html
<ng0-dropdown>
Primary
<ng0-dropdown-menu>
<ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
<ng0-dropdown-divider />
<ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
<ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
<ng0-dropdown-link link="/" target="_blank">
Home Page (link, target: _blank)
</ng0-dropdown-link>
<ng0-dropdown-divider />
<ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
Active route with custom css class (link)
</ng0-dropdown-link>
</ng0-dropdown-menu>
</ng0-dropdown>
offcanvas-example.component.ts
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';
@Component({
selector: 'app-dropdown-example',
templateUrl: './dropdown-example.component.html',
standalone: true,
imports: [DropdownModule]
})
export class DropdownExampleComponent {
}
Backdrop
You can enable or disable the backdrop by setting the `backdrop` property.
Backdrop example
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
backdrop-example.component.html
<ng0-dropdown>
Primary
<ng0-dropdown-menu>
<ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
<ng0-dropdown-divider />
<ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
<ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
<ng0-dropdown-link link="/" target="_blank">
Home Page (link, target: _blank)
</ng0-dropdown-link>
<ng0-dropdown-divider />
<ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
Active route with custom css class (link)
</ng0-dropdown-link>
</ng0-dropdown-menu>
</ng0-dropdown>
backdrop-example.component.ts
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';
@Component({
selector: 'app-dropdown-example',
templateUrl: './dropdown-example.component.html',
standalone: true,
imports: [DropdownModule]
})
export class DropdownExampleComponent {
}