React Sidebar Component

Sidebar

Sidebar is a panel component displayed as an overlay.

Import via Module


import { Sidebar } from 'primereact/sidebar';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/sidebar/sidebar.min.js"></script>

Getting Started

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


<Sidebar visible={visible} onHide={() => setVisible(false)}>
    Content
</Sidebar>

<Button icon="pi pi-arrow-right" onClick={(e) => setVisible(true)}/>

Position

Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the position property.


<Sidebar visible={visible} position="right" onHide={() => setVisible(false)}>
    Content
</Sidebar>

Size

Sidebar size can be changed using a fixed value or using one of the three predefined ones.


<Sidebar visible={visible} position="right" className="p-sidebar-sm" onHide={() => setVisible(false)}></Sidebar>
<Sidebar visible={visible} position="right" className="p-sidebar-md" onHide={() => setVisible(false)}></Sidebar>
<Sidebar visible={visible} position="right" className="p-sidebar-lg" onHide={() => setVisible(false)}></Sidebar>
<Sidebar visible={visible} position="right" style={{width:'30em'}} onHide={() => setVisible(false)}></Sidebar>

Full Screen

Full screen mode allows the sidebar to cover whole screen.


<Sidebar visible={visible} fullScreen onHide={() => setVisible(false)}}>
    Content
</Sidebar>

Custom toolbar

Additional content can be provided using the icons property.


<Sidebar visible={visibleCustomToolbar} onHide={() => setVisibleCustomToolbar(false)} icons={() => (
    <React.Fragment>
        <button className="p-sidebar-close p-link">
            <span className="p-sidebar-close-icon pi pi-print"/>
        </button>
        <button className="p-sidebar-close p-link">
            <span className="p-sidebar-close-icon pi pi-arrow-right"/>
        </button>
    </React.Fragment>
)}>
    <h1 style={{fontWeight:'normal'}}>Sidebar with custom icons</h1>
    <Button type="button" onClick={(e) => setVisibleCustomToolbar(false)} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
    <Button type="button" onClick={(e) => setVisibleCustomToolbar(false)} label="Cancel" className="p-button-secondary"/>
</Sidebar>

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
style	object	null	Inline style of the component.
className	string	null	Style class of the component.
maskStyle	string	null	Inline style of the mask.
maskClassName	string	null	Style class of the mask.
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.
blockScroll	boolean	false	Whether to block scrolling of the document when sidebar is active.
baseZIndex	number	0	Base zIndex value to use in layering.
dismissable	boolean	true	Whether to dismiss sidebar on click of the mask.
showCloseIcon	boolean	true	Whether to display a close icon inside the panel.
ariaCloseLabel	string	close	Aria label of the close icon.
icons	any	null	Custom icons template for the header.
modal	boolean	true	Whether to a modal layer behind the sidebar.
appendTo	DOM element \| string	document.body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
closeOnEscape	boolean	true	Specifies if pressing escape key should hide the sidebar.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Events

Name	Parameters	Description
onHide	-	Callback to invoke when the actions used to close the sidebar are triggered. Exp; close icon, mask and esc key.
onShow	-	Callback to invoke when sidebar gets shown.

Styling

Following is the list of structural style classes.

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-view	The page view is displayed according to the sidebar position.
p-sidebar-content	A content is displayed according to the sidebar position. To use this style, a sidebar must be created inside that content using the appendTo property and this content must have position:"relative" style.
p-sidebar-mask	Modal layer of the sidebar.