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

Placement. Put SidebarGroupLabel as a sibling BEFORE SidebarMenu, both direct children of SidebarGroup (every example on this page does this) — not nested inside the menu, which is a <ul> and can only directly contain list items. If you do need a labelled sub-section within one already-open menu's item list, it's still safe to nest it there: SidebarGroupLabel detects that placement automatically and wraps itself in <li role="presentation"> to stay valid HTML.

SidebarMenu

SidebarMenuItem

SidebarSeparator

Placement. Used between two SidebarGroups (the pattern above), SidebarSeparator renders a plain <div>. Dropped inside a SidebarMenu instead — to break up one menu's items into visual sub-sections — it detects that automatically and wraps itself in <li role="presentation"> so the list stays valid HTML either way.

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