Confirm?

Are you sure you want to proceed?
E
Elgato

Sidebar Menu Design

Clone & Customize via AI

Blazor Sidebar Menu provides a left navigation component with sectioned groups and logout action. It uses NavLink for active routing and Bootstrap layout classes for responsive behavior.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Vertical sidebar component with three section groups (MAIN MENU, OPERATIONS, FINANCIAL) and a logout button. - Navigation links using NavLink with ActiveClass styling to indicate the current route. - Static menu data model (SidebarItemModel) and Razor foreach rendering. - Scoped CSS for layout, spacing, colors, hover and active states plus a responsive media query for smaller screens. ## Key components - NavLink (Blazor routing/navigation) - SidebarItemModel (C# POCO model) - Razor component: SidebarMenu.razor and demo page SidebarDemo.razor - Scoped stylesheet: SidebarMenu.razor.css - HTML button for logout (unstyled Bootstrap button classes used) ## How it works - Menu items are stored in three List<SidebarItemModel> instances and rendered with a foreach loop. - NavLink handles client-side routing; ActiveClass applies the .sidebar-link-active CSS to the active route. - Icons are provided via IconClass strings (FontAwesome classes) and rendered inside <i> elements. - No data binding to services or authentication is present; the logout button is a static element that requires an event handler to perform sign-out. ## Styling - Layout uses Bootstrap utility classes present in markup (d-flex, flex-column, mt-auto, p-4) for the container and demo layout. - Visual design and states are implemented in SidebarMenu.razor.css (scoped CSS). The file defines widths, spacing, colors, hover transitions and a media query at 768px to stack the sidebar. - FontAwesome icon classes drive the icon visuals; include the FontAwesome CSS in the host page when integrating. ## Reuse steps 1. Add SidebarMenu.razor and SidebarMenu.razor.css to a shared Components folder and include SidebarItemModel.cs in a Models folder. 2. Ensure Bootstrap utilities are available (via site CSS or _Host.cshtml/_Layout). Add FontAwesome CSS for icons. 3. Import the component where needed (e.g., in MainLayout.razor) and remove the demo wrapper when integrating. 4. Replace static lists with a service or IConfiguration-backed menu provider to enable dynamic menus and role-based items. 5. Wire the logout button to an authentication service or NavigationManager and implement tests for active route behavior. ## Limitations & next steps - This is a single UI component generated by Instruct UI and is editable, but it lacks server/service wiring and authentication hooks. - No localization, permission checks, or lazy-loading of menu data are implemented. - Recommended next steps: add an IMenuService to provide menu items, implement a Logout callback (EventCallback or injected auth service), and add unit/visual tests for responsive behavior and ActiveClass handling.