• Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of API in ASP.NET Core Sidebar Control

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.

DEMO
SOURCE
Overview

The Sidebar component is a collapsible side content placed along with the main content either in left or right side of the page.


Options

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.



Sidebar
The ASP.NET Core Sidebar is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content. It provides flexible options that can be shown and hidden based on user interactions.

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.