# Sidebar

Source: https://lumeo.nativ.sh/components/sidebar

# Sidebar

A collapsible sidebar layout with groups, menus, header, and footer. Supports Push, Overlay, and Icon variants.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Push (Default)

Acme Inc

Platform

-   [Dashboard](#)
-   [Team](#)
-   [Settings](#)

CN

User

Sidebar pushes the main content. Fully hidden when collapsed.

Preview Code

Overlay

Workspace

Navigation

-   [Home](#)
-   [Search](#)
-   [Notifications](#)
-   [Settings](#)

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

Preview Code

Side — interactive

Pick a value to see it applied live.

LeftRight

Left Side

Navigation

-   [Dashboard](#)
-   [Settings](#)

Sidebar appears on the left.

Preview Code

Icon

-   [Home](# "Home")
-   [Search](# "Search")
-   [Notifications](# "Notifications")
-   [Settings](# "Settings")

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

Preview Code

MiniRail (hover-expand)

-   [Home](# "Home")
-   [Search](# "Search")
-   [Settings](# "Settings")

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

Preview Code

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.

Acme Inc

Platform

-   [Dashboard](#)
-   [Settings](#)

CN

User

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

### 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](/components/navigation-menu) — Horizontal navigation bar for top-level page links
-   [Sheet](/components/sheet) — Slide-in overlay panel for temporary content or actions
-   [Drawer](/components/drawer) — Bottom or side drawer for mobile-friendly navigation