Sidebar

Sidebar, also known as Drawer, is a container component displayed as an overlay.

Import#


import { Sidebar } from 'primereact/sidebar';

Basic#

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


<div className="card flex justify-content-center">
    <Sidebar visible={visible} onHide={() => setVisible(false)}>
        <h2>Sidebar</h2>
        <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>
    </Sidebar>
    <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
</div>

Position#

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


<div className="flex gap-2 justify-content-center">
    <Button icon="pi pi-arrow-right" onClick={() => setVisibleLeft(true)} />
    <Button icon="pi pi-arrow-left" onClick={() => setVisibleRight(true)} />
    <Button icon="pi pi-arrow-down" onClick={() => setVisibleTop(true)} />
    <Button icon="pi pi-arrow-up" onClick={() => setVisibleBottom(true)} />
</div>

<Sidebar visible={visibleLeft} position="left" onHide={() => setVisibleLeft(false)}>
    <h2>Left Sidebar</h2>
    <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>
</Sidebar>

<Sidebar visible={visibleRight} position="right" onHide={() => setVisibleRight(false)}>
    <h2>Right Sidebar</h2>
    <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>
</Sidebar>

<Sidebar visible={visibleTop} position="top" onHide={() => setVisibleTop(false)}>
    <h2>Top Sidebar</h2>
    <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>
</Sidebar>

<Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
    <h2>Bottom Sidebar</h2>
    <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>
</Sidebar>

Size#

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


<div className="card flex justify-content-center">
    <Sidebar visible={visible} onHide={() => setVisible(false)} fullScreen>
        <h2>Sidebar</h2>
        <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>
    </Sidebar>
    <Button icon="pi pi-th-large" onClick={() => setVisible(true)} />
</div>

Full Screen#

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


<div className="card flex justify-content-center">
    <Sidebar visible={visible} onHide={() => setVisible(false)}>
        <h2>Sidebar</h2>
        <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>
    </Sidebar>
    <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
</div>

Template#

Additional content at the header section is provided using the icons property.


<Sidebar visible={visible} onHide={() => setVisible(false)} icons={customIcons}>
    <h2>Sidebar</h2>
    <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>
</Sidebar>
<Button icon="pi pi-plus" onClick={() => setVisible(true)} />

Style#

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	Content of sidebar.
p-sidebar-mask	Modal layer of the sidebar.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.


<Button icon="pi pi-arrow-right" onClick={(e) => setVisible(true)} aria-controls={visible ? 'sbar' : null} aria-expanded={visible ? true : false}/>

<Sidebar id="sidebar" visible={visible} onHide={() => setVisible(false)} role="region">
Content
</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.