# Collapsible

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

# Collapsible

An interactive component that expands and collapses content.

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

<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

Preview Code

Default

#### Starred Repositories

@shadcn/ui

@radix-ui/primitives

@tailwindcss/typography

Preview Code

Initially Open

More info

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

Preview Code

Sidebar Section

Settings

General

Security

Notifications

## API Reference

### Collapsible

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Content including trigger and collapsible content.

Open

bool

false

Controls whether the content is visible. Use with @bind-Open.

OpenChanged

EventCallback<bool>

—

Callback invoked when the open state changes.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

IsOpen

bool

\> Open

Obsolete alias for Open; will be removed in a future release.

IsOpenChanged

EventCallback<bool>

\> OpenChanged

Obsolete alias for OpenChanged; will be removed in a future release.

### CollapsibleTrigger

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Clickable trigger content.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### CollapsibleContent

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Content shown when the collapsible is open.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [Accordion](/components/accordion) — For multiple collapsible sections where only one (or a few) can be open at a time
-   [Card](/components/card) — For grouping related content in a visual container
-   [Dialog](/components/dialog) — For showing content in a modal overlay instead of inline expansion