1. Home
  2. Forum
  3. Blazor
  4. Sidebar as navigation menu for Admin spa site on Blazor net.9

Sidebar as navigation menu for Admin spa site on Blazor net.9

I have strong skills in backend development, but it's time for me to sharpen my frontend expertise. To do that, I’ve gone through extensive readings on Syncfusion components and watched every available video to understand how to implement them in a real project.


Now, I’m looking for guidance on setting up an admin site using Syncfusion components, specifically focusing on the Sidebar and Navbar. I will provide specifications outlining my objectives, along with images of some menu items to give a clearer picture of my vision.


A starter kit would be greatly appreciated to help kickstart the process.


markdown of my site below:


## my Admin site – Functional Documentation

### 1. Header (Navbar)

- Fixed at the top.

- Contains logo, notifications, and user menu.

- Collapses on smaller screens using a hamburger menu.


### 2. Sidebar (Navigation)

- Layout supports customization, allowing developers to add menu items and adjust its width dynamically

- Vertical menu on the left.

- Supports nested menus and icons.

- Sticky/fixed layout for persistent visibility.

- Hidden on smaller screens and toggled via a button.


### 3. Main Content

- Central area for dashboards, forms, and other pages.

- Scrollable independently of sidebar

- Adjusts padding/margin to accommodate sidebar.

- Responsive resizing and stacking on smaller screens.


### 4. Footer

- Appears at the bottom.

- Minimal layout using flex or centered text.

- Responsive by default.


### 5. Responsiveness

- Fully responsive layout.

- Sidebar and navbar adapt to mobile view using togglers

- Content adapts


think for your help.


Attachment: System_Navigationimages_b30e3f1b.zip

3 Replies
LD LeoLavanya Dhanaraj Syncfusion Team June 5, 2025 04:37 AM UTC

Hi Urso,


Greetings from Syncfusion support.


As per the requirements, we have prepared a Blazor Sidebar sample using .NET 9. In this sample, we have included a Sidebar with dock support. The header features a name and an avatar to display an image, along with a hamburger icon for expanding and collapsing the Sidebar. When the Sidebar is open, a TreeView structure is displayed; when collapsed, the dock is enabled, and hovering over the icon will reveal the Menu.


Please refer to the attached screenshot and sample for your reference.


Sidebar open

Sidebar close


Additionally, you can refer the documentation links below for further customization options in your application.


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


Demo : https://blazor.syncfusion.com/demos/sidebar/sidebar-with-menu?theme=fluent2


Regards,

Leo Lavanya Dhanaraj


Attachment: BlazorSample_2403ec6b.zip

UL Urso Leroy June 5, 2025 03:30 PM UTC

Thank you for getting back to me with good staring point for my learning journey of Syncfusion.

While we are at it, can you help me make sure that all the css for a component is in Component-specific .razor.css files. 

Instead of having it into 2 differents places i.e having it into a Component-specific .razor.css and also a Style Tags Inside Razor Files (e.g., <style> ... </style>). unless you have a good technical reason for doing so!


best regards

Urso.


LD LeoLavanya Dhanaraj Syncfusion Team June 18, 2025 04:26 AM UTC

Hi Urso,


Thanks for your patience.


As per your request, we have modified and included the component-specific Razor file styles in their corresponding razor.css files instead of using the style tag. Please check the sample on your end and let us know if you need any further assistance in the future.


Attachment: BlazorSample_c868af6c.zip

Loader.
Up arrow icon