I'm not getting what I want

Hi,

 I would like to create a dashboard layout for a app I want to build that has features like this example

https://demo.adminkit.io/index.html

left menu column collapsible with pancake icon, of the menu items on the left some are collapsible top menu as in example, dark/light mode, of course all links are rendered in the main section

Does anyone ever made one like this?

Could someone point me out which syncfusion components I'm going to need and how they are nested to get a page like this?


1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team June 12, 2023 01:21 PM UTC

Hi Beunens,


Greetings from Syncfusion support.


We understand that you want to achieve the output shown in the shared output link. You can achieve this layout structure by using our Syncfusion Sidebar, Dashboard Layout, Dropdowns, TreeView, Badge, and Avatar components.


S.NO

Component

Component details

Links

1

Dashboard Layout component : our Blazor Dashboard is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. Dashboard panels are the basic building blocks of a dashboard and can be added programmatically or dynamically at runtime. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. Easily place components at the desired positions within the grid layout. Refer the below links to know more about Dashboard component behavior.

Documentation : https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started

API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#properties

Demo : https://blazor.syncfusion.com/demos/dashboard-layout/overview?theme=fluent

2

Sidebar: Sidebar is an expandable and collapsible component that typically acts as a side container in which to place primary or secondary content alongside the main content. It provides flexible options that can be shown or hidden based on user interactions. Any type of HTML content or component can be placed in the Blazor Sidebar control for quick access and for easy navigation, like quick references, menus, lists, and tree views.

Documentation : https://blazor.syncfusion.com/documentation/sidebar/getting-started

API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#properties

Demo : https://blazor.syncfusion.com/demos/sidebar/panel-with-responsive?theme=fluent

3

TreeView : TreeView is a UI component that displays hierarchical data, such as a table of contents, code examples, and file directories, in a tree structure. TreeView is feature-rich, supporting data binding, loading on demand, multiple selection, drag and drop, node editing, checkboxes, templates, and more in both Blazor WebAssembly (WASM) and Blazor Server apps.

Documentation : https://blazor.syncfusion.com/documentation/treeview/getting-started

API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#properties

Demo : https://blazor.syncfusion.com/demos/treeview/default-functionalities?theme=fluent

4

Avatar: The avatar is developed in pure CSS which is used to represents the profile picture or initials or icons in presentable way. 

Documentation : https://blazor.syncfusion.com/documentation/avatar/getting-started

Demo : https://blazor.syncfusion.com/demos/avatar/defaultfunctionalities?theme=fluent

5

Badge: The Badge is a component which is developed in pure CSS and designed in em relative units, so that badge will always be in relevant to the parent and makes the badge super easy to customize.

Documentation : https://blazor.syncfusion.com/documentation/badge/getting-started

Demo : https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=fluent

6

Dropdown Menu : Dropdown Menu is a graphical user interface component that lets users choose from a list of actions that can be triggered. It has built-in support for icons and their positioning, various sizes, separators, RTL, and UI customization.

Documentation : https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started

API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#properties

Demo : https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=fluent


Please check out the above shared details and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj



Loader.
Up arrow icon