Angular Sidebar is a panel component displayed as an overlay at the edges of the screen.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {SidebarModule} from 'primeng/sidebar';
Getting Started
Sidebar is used as a container and visibility is controlled with visible property.
<p-sidebar [(visible)]="display">
Content
</p-sidebar>
<p-button type="text" (click)="display = true" icon="pi pi-plus" label="Show"></p-button>
Position
Sidebar can either be located as the left (default), right, top or bottom of the screen depending on the position property.
<p-sidebar [(visible)]="display" position="right">
Content
</p-sidebar>
Size
Sidebar size can be changed using a fixed value or using one of the three predefined ones.
<p-sidebar [(visible)]="display" [style]="{width:'30em'}"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="p-sidebar-sm"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="p-sidebar-md"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="p-sidebar-lg"></p-sidebar>
Full Screen
Full screen mode allows the sidebar to cover whole screen.
<p-sidebar [(visible)]="display" [fullScreen]="true">
Content
</p-sidebar>
Theming
Sidebar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Sidebar showcase for demos and documentation.