Sidebar
A collapsible sidebar layout with groups, menus, header, and footer. Supports Push, Overlay, and Icon variants.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Sidebar />
When to Use
- Application-level navigation with collapsible menu groups
- Admin panels and dashboard layouts with persistent navigation
- Multi-section apps that need icon-only, push, or overlay sidebar variants
- Any layout requiring a collapsible side panel with header, content, and footer areas
Sidebar pushes the main content. Fully hidden when collapsed.
Sidebar slides over the main content. Click the backdrop to dismiss.
Pick a value to see it applied live.
Sidebar appears on the left.
Compact icon-only sidebar. Toggle to expand with labels.
Hover the rail to expand. Click toggle to pin open.
Mobile (rc.49). The sidebar toggle trigger and all menu buttons now meet the 44×44 px minimum touch-target size, making the sidebar fully navigable on touch screens.
API Reference
SidebarProvider
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The sidebar and main content. |
| IsCollapsed | bool | false | Controls the sidebar collapsed state. Use with @bind-IsCollapsed. |
| IsCollapsedChanged | EventCallback<bool> | - | Callback invoked when the collapsed state changes. |
| Variant | SidebarVariant | Push | Sidebar display mode. Values: Push, Overlay, Icon. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
SidebarComponent
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The sidebar content (header, content, footer). |
| Side | Lumeo.Side | Left | Which side the sidebar appears on. Values: Left, Right. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
SidebarMenuButton
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | Fallback content when Icon/Label are not used. |
| IconContent | RenderFragment? | null | Icon slot rendered at the start of the button. |
| LabelContent | RenderFragment? | null | Label slot hidden when sidebar is collapsed. |
| Href | string? | null | Navigation URL. Renders as an anchor when set. |
| Tooltip | string? | null | Tooltip text shown when the sidebar is collapsed. |
| IsActive | bool | false | Highlights the button as the active/current item. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
SidebarHeader / SidebarContent / SidebarFooter / SidebarGroup / SidebarGroupLabel / SidebarMenu / SidebarMenuItem / SidebarSeparator / SidebarTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The component content. All layout sub-components accept ChildContent. |
| Bordered | bool | true | SidebarHeader / SidebarFooter only. When false, drops the divider rule (bottom/top border) so the section flows seamlessly into the content. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. SidebarTrigger toggles collapsed state. SidebarGroupLabel hides text when collapsed. SidebarSeparator has no ChildContent. |
Related Components
- NavigationMenu — Horizontal navigation bar for top-level page links
- Sheet — Slide-in overlay panel for temporary content or actions
- Drawer — Bottom or side drawer for mobile-friendly navigation