Sidebar

The Sidebar is designed for displaying additional information or editing/creating new items. The component provides animation, a close button, and consistent paddings and title positioining. Sidebars are always optional, and can be used on any Page you like.

It is intended to be used within the ApplicationFrame and along side BrandedNavBar.

See props for accessibility features.


isOpen
children
hideCloseButton
footer
triggerRef
onClose
closeOnOutsideClick
overlay

Props

NameTypeDefaultDescription

isOpen

boolean

An event handler for opening the Sidebar.

children

react node

Inner content.

offset

string

0px

The amount of pixels to offset the Sidebar from on the right of the screen. Mostly used for in the case of multiple Sidebars.

top

string

0px

The amount of pixels to offset the Sidebar from on the top of the screen. Mostly used for in the case of multiple Sidebars.

hideCloseButton

boolean

false

When true, hides the close button

closeButtonTestId

string

Sidebar-close-button

To use the close button in a test.

closeButtonAriaLabel

string

close

Aria label for the close button.

duration

number

0.25

The length of the animation for sliding in and out the Sidebar.

footer

react node

An optional sticky footer.

title

string

A heading to display at the top of the Sidebar.

triggerRef

object

The button that was used to open the Sidebar. Setting this can will allow focus to return to that element when the Sidebar is closed. If it's not set, the focus will be set to the first element on the page.

onClose

function

An event handler for closing the Sidebar.

closeOnOutsideClick

boolean

true

If true, calls onClose when the user clicks anywhere but the Sidebar.

overlay

boolean

true

If true, displays an overlay behind the sidebar when it is open.

Related Components