Lumeo

Collapsible

An interactive component that expands and collapses content.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Collapsible />

When to Use

  • Showing and hiding optional content such as advanced settings or extra details
  • Expandable sidebar sections for navigation grouping
  • Spoiler text or progressive disclosure where content is hidden by default

Starred Repositories

@shadcn/ui
More info

This section was initially expanded and can be toggled open and closed.

Settings
General
Security
Notifications

API Reference

Collapsible

Prop Type Default Description
ChildContentRenderFragment?nullContent including trigger and collapsible content.
OpenboolfalseControls whether the content is visible. Use with @bind-Open.
OpenChangedEventCallback<bool>—Callback invoked when the open state changes.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.
IsOpenbool> OpenObsolete alias for Open; will be removed in a future release.
IsOpenChangedEventCallback<bool>> OpenChangedObsolete alias for OpenChanged; will be removed in a future release.

CollapsibleTrigger

Prop Type Default Description
ChildContentRenderFragment?nullClickable trigger content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

CollapsibleContent

Prop Type Default Description
ChildContentRenderFragment?nullContent shown when the collapsible is open.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

Related Components

  • Accordion — For multiple collapsible sections where only one (or a few) can be open at a time
  • Card — For grouping related content in a visual container
  • Dialog — For showing content in a modal overlay instead of inline expansion