Sidebar

Sidebar is a panel component displayed as an overlay at the edges of the screen.


import { SidebarModule } from 'primeng/sidebar';

Sidebar is used as a container and visibility is controlled with a binding to visible.



<p-sidebar [(visible)]="sidebarVisible">
    <h3>Sidebar</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</p-sidebar>
<p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>

Sidebar location is configured with the position property that can take left, right, top and bottom as a value.



<p-sidebar [(visible)]="sidebarVisible1" position="left">
    <h3>Left Sidebar</h3>
</p-sidebar>

<p-sidebar [(visible)]="sidebarVisible2" position="right">
    <h3>Right Sidebar</h3>
</p-sidebar>

<p-sidebar [(visible)]="sidebarVisible3" position="top">
    <h3>Top Sidebar</h3>
</p-sidebar>

<p-sidebar [(visible)]="sidebarVisible4" position="bottom">
    <h3>Bottom Sidebar</h3>
</p-sidebar>

<p-button type="button" class="mr-2" (click)="sidebarVisible1 = true" icon="pi pi-arrow-right"></p-button>
<p-button type="button" class="mr-2" (click)="sidebarVisible2 = true" icon="pi pi-arrow-left"></p-button>
<p-button type="button" class="mr-2" (click)="sidebarVisible3 = true" icon="pi pi-arrow-down"></p-button>
<p-button type="button" class="mr-2" (click)="sidebarVisible4 = true" icon="pi pi-arrow-up"></p-button>

Sidebar can cover the whole page when fullScreen property is enabled.



<p-sidebar [(visible)]="sidebarVisible" [fullScreen]="true">
    <h3>Full Screen Sidebar</h3>
</p-sidebar>
<p-button (click)="sidebarVisible = true" icon="pi pi-th-large"></p-button>

Sidebar dimension can be defined with style or styleClass properties which can also be responsive when used with a CSS utility library like PrimeFlex.



<p-sidebar [(visible)]="sidebarVisible" styleClass="w-30rem">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</p-sidebar>
<p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>

Sidebar is customizable by header, content, footer templates.



<p-sidebar [(visible)]="sidebarVisible">
    <ng-template pTemplate="header">Header Content</ng-template>
    <ng-template pTemplate="content">Body Content</ng-template>
    <ng-template pTemplate="footer">Footer Content</ng-template>
</p-sidebar>
<p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>

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

NameElement
p-sidebarContainer element
p-sidebar-leftContainer element of left sidebar.
p-sidebar-rightContainer element of right sidebar.
p-sidebar-topContainer element of top sidebar.
p-sidebar-bottomContainer element of bottom sidebar.
p-sidebar-fullContainer element of a full screen sidebar.
p-sidebar-activeContainer element when sidebar is visible.
p-sidebar-closeClose anchor element.
p-sidebar-smSmall sized sidebar.
p-sidebar-mdMedium sized sidebar.
p-sidebar-lgLarge sized sidebar.
p-sidebar-maskModal layer of the sidebar.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

Sidebar component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the sidebar when opened.

It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.

Trigger element also requires aria-expanded and aria-controls to be handled explicitly.


<p-button 
    icon="pi pi-arrow-right" 
    (click)="sidebarVisible = true" 
    aria-controls="{{sidebarVisible ? 'sidebar' : null}}" 
    aria-expanded="{{sidebarVisible ? true : false}}"
></p-button>
<p-sidebar 
    [(visible)]="sidebarVisible" 
    id="sidebar"
    (onHide)="sidebarVisible = false"
    role="region"
>
    content
</p-sidebar>

Overlay Keyboard Support

KeyFunction
tabMoves focus to the next the focusable element within the sidebar.
shift + tabMoves focus to the previous the focusable element within the sidebar.
escapeCloses the dialog if closeOnEscape is true.

Close Button Keyboard Support

KeyFunction
enterCloses the sidebar.
spaceCloses the sidebar.