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,