Sidebar

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

Import #


import { SidebarModule } from 'primeng/sidebar';

Basic #

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>

Position #

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>

Full Screen #

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>

Size #

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>

Template #

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>

Style #

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

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

Accessibility #

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

Key	Function
tab	Moves focus to the next the focusable element within the sidebar.
shift + tab	Moves focus to the previous the focusable element within the sidebar.
escape	Closes the dialog if closeOnEscape is true.

Close Button Keyboard Support

Key	Function
enter	Closes the sidebar.
space	Closes the sidebar.

Sidebar API

API defines helper props, events and others for the PrimeNG Sidebar module.

Sidebar #

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

Properties #

Defines the input properties of the component.

name	type	default	description
appendTo	any	null	Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
blockScroll	boolean	false	Whether to block scrolling of the document when sidebar is active.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
ariaCloseLabel	string	null	Aria label of the close icon.
autoZIndex	boolean	true	Whether to automatically manage layering.
baseZIndex	number	0	Base zIndex value to use in layering.
modal	boolean	true	Whether an overlay mask is displayed behind the sidebar.
dismissible	boolean	true	Whether to dismiss sidebar on click of the mask.
showCloseIcon	boolean	true	Whether to display the close icon.
closeOnEscape	boolean	true	Specifies if pressing escape key should hide the sidebar.
transitionOptions	string	150ms cubic-bezier(0, 0, 0.2, 1)	Transition options of the animation.
visible	boolean	null	Specifies the visibility of the dialog.
position	string	null	Specifies the position of the sidebar, valid values are "left", "right", "bottom" and "top".
fullScreen	boolean	null	Adds a close icon to the header to hide the dialog.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onShow	value : any	Callback to invoke when dialog is shown.
onHide	value : any	Callback to invoke when dialog is hidden.
visibleChange	value : boolean	Callback to invoke when dialog visibility is changed.

Templates #

Defines the templates used by the component.

name	parameters	description
header	null	Custom template of header.
content	null	Custom template of content.
footer	null	Custom template of footer.
closeicon	null	Custom template of closeicon.