The Sidebar API sample demonstrates how to customize the Sidebar component by using its properties from the property pane. Select any combination of properties from the property pane to customize the Sidebar. Click on the hamburger menu icon to expand/collapse the sidebar.
The Sidebar component is a collapsible side content placed along with the main content either in left or right side of the page.
Toggle - Toggles the Sidebar to be open or closed state.
Position - Allows to place the sidebar in right or left side of the page.
Types - Specifies the act of expanding or collapsing the sidebar with main content.
Closing on document click - Allows to collapse / close the sidebar on document click.
Backdrop - Sets the backdrop over the main content area on open / expanded state.
In this demo, the default Sidebar is rendered with minimal configuration. This sample can be customized further with the combination of Sidebar properties. For example, The Sidebar can be opened or closed by clicking on the toggle button. The Sidebar position can be changed by clicking on the position button. The Sidebar types can be changed from the Dropdown List. The Sidebar can be collapsed or closed on document click from the provided options. The Sidebar overlay can be enabled or disabled by clicking on the Backdrop button.