Sidebar Sidebar is a panel component displayed as an overlay.

Left Sidebar

Right Sidebar

Top Sidebar

Bottom Sidebar

Full Screen Sidebar

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>

<button type="text" (click)="display = true" pButton icon="fa-external-link-square" label="Show"></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" [ngStyle]="{width:'30em'}"></p-sidebar>

<p-sidebar [(visible)]="display" styleClass="ui-sidebar-sm"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="ui-sidebar-md"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="ui-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>

Properties

Name Type Default Description
visible boolean false Specifies the visibility of the dialog.
position string left Specifies the position of the sidebar, valid values are "left" and "right".
fullScreen boolean false Adds a close icon to the header to hide the dialog.
appendTo any null Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element.
style string null Inline style of the component.
styleClass string null Style class of the component.
blockScroll boolean false Whether to block scrolling of the document when sidebar is active.
baseZIndex number 0 Base zIndex value to use in layering.
autoZIndex boolean true Whether to automatically manage layering.

Events

Name Parameters Description
onShow event: Event object Callback to invoke when dialog is shown.
onHide event: Event object Callback to invoke when dialog is hidden.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-sidebar Container element
ui-sidebar-left Container element of left sidebar.
ui-sidebar-right Container element of right sidebar.
ui-sidebar-top Container element of top sidebar.
ui-sidebar-bottom Container element of bottom sidebar.
ui-sidebar-full Container element of a full screen sidebar.
ui-sidebar-active Container element when sidebar is visible.
ui-sidebar-close Close anchor element.
ui-sidebar-sm Small sized sidebar.
ui-sidebar-md Medium sized sidebar.
ui-sidebar-lg Large sized sidebar.
ui-sidebar-mask Modal layer of the sidebar.

Dependencies

None.

 View on GitHub 

<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Left Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar1 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar1 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Right Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar2 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar2 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Top Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar3 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar3 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Bottom Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar4 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar4 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Full Screen Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar5 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar5 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>

<button pButton type="button" (click)="visibleSidebar1 = true" icon="fa-arrow-right"></button>
<button pButton type="button" (click)="visibleSidebar2 = true" icon="fa-arrow-left"></button>
<button pButton type="button" (click)="visibleSidebar3 = true" icon="fa-arrow-down"></button>
<button pButton type="button" (click)="visibleSidebar4 = true" icon="fa-arrow-up"></button>
<button pButton type="button" (click)="visibleSidebar5 = true" icon="fa-arrows-alt"></button>



export class SidebarDemo {

    visibleSidebar1;
    
    visibleSidebar2;
    
    visibleSidebar3;
    
    visibleSidebar4;
    
    visibleSidebar5;
    
}