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

Push (Default)

Sidebar pushes the main content. Fully hidden when collapsed.

Overlay

Sidebar slides over the main content. Click the backdrop to dismiss.

Side — interactive

Pick a value to see it applied live.

Sidebar appears on the left.

Icon

Compact icon-only sidebar. Toggle to expand with labels.

MiniRail (hover-expand)

Hover the rail to expand. Click toggle to pin open.

Grouped with Separator

A SidebarSeparator divides the two menu groups.

Seamless header & footer

Pass Bordered="false" on SidebarHeader / SidebarFooter to drop the divider rule and let the section flow into the content — replaces the consumer-side !border-b-0 / !border-t-0 override.

Header and footer flow into the content with no divider rule.

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

Keyboard toggle. SidebarProvider registers a global shortcut — Ctrl+B by default via ToggleShortcut="ctrl+b" — that collapses or expands the sidebar. The shortcut is registered with allowInEditable: false, so it will not fire while focus is inside an input, textarea, select, or contenteditable element — it never steals a keystroke mid-typing. Pass an empty string to disable it.

SidebarProvider

SidebarComponent

SidebarMenuButton

SidebarHeader / SidebarContent / SidebarFooter / SidebarGroup / SidebarGroupLabel / SidebarMenu / SidebarMenuItem / SidebarSeparator / SidebarTrigger

Each layout sub-component below has its own props table — Bordered only applies to SidebarHeader / SidebarFooter, SidebarSeparator takes no ChildContent, and clicking SidebarTrigger toggles the sidebar's collapsed state.

SidebarHeader

SidebarContent

SidebarFooter

SidebarGroup

SidebarGroupLabel

SidebarMenu

SidebarMenuItem

SidebarSeparator

SidebarTrigger

Styling hooks (data-state)

The sidebar exposes a data-state of expanded or collapsed, plus data-collapsible (the collapse mode when collapsed), so rail/offcanvas styling can respond to the open state purely through CSS hooks.

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