Layout

TwCollapse

TwCollapse is a Blazor collapse component that expands and hides content. Bind IsOpen, set Title or HeaderContent, and react to OnToggle.

Last updated 24 September 2026

Basic Collapse

The TwCollapse component provides a collapsible drawer panel that expands and collapses when the trigger button is clicked.

Razor

<TwCollapse Title="What is TwBlazor?" Class="mt-4">
    <p class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">TwBlazor is a Tailwind CSS component library for Blazor that makes it easy to build modern, accessible UIs.</p>
</TwCollapse>

Default Open

Set IsOpen="true" to have the panel expanded on first render.

Install the TwBlazor NuGet package and call AddTwBlazor() in your service registration.

Razor

<TwCollapse Title="Getting started" IsOpen Class="mt-4">
    <p class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Install the TwBlazor NuGet package and call <code>AddTwBlazor()</code> in your service registration.</p>
</TwCollapse>

Two-way Binding

Use @bind-IsOpen to control the panel state from a parent component.

Panel is closed

Razor

<div class="flex items-center gap-3 mt-4 mb-4">
    <TwButton Label="@(isOpen ? "Close" : "Open")" OnClick="@(() => isOpen = !isOpen)" Color="Color.Primary" />
    <span class="text-sm text-gray-500 dark:text-gray-400">Panel is <strong>@(isOpen ? "open" : "closed")</strong></span>
</div>
<TwCollapse Title="Controlled panel" @bind-IsOpen="isOpen">
    <p class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">This panel is controlled from outside the component via two-way binding.</p>
</TwCollapse>

Custom Header

Use the HeaderContent parameter to replace the plain title with fully custom markup.

Razor

<TwCollapse Class="mt-4">
    <HeaderContent>
        <TwIcon Icon="Icon.Info_Circle" Class="text-blue-500" />
        <span>Additional information</span>
    </HeaderContent>
    <ChildContent>
        <p class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Custom header content lets you compose icons, badges, or any Blazor markup inside the trigger button.</p>
    </ChildContent>
</TwCollapse>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwCollapseTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Container`	string
`Trigger`	string
`Icon`	string
`IconOpen`	string
`Content`	string

Full reference: TwCollapseTheme on the API docs.