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.

More Details...


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.