Accordion

Composition

This component is a composition of 2 key components:

LumexAccordion: The container that holds collapsible sections.
LumexAccordionItem: The individual collapsible section within the accordion.

Usage

The basic accordion component helps organize content in a collapsible format. Each item can expand or collapse to show or hide its content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<LumexAccordion>
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2">
        <TitleContent>
            <span>
                Accordion <strong>#2</strong>
            </span>
        </TitleContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Disabled

Prevent user interaction by disabling the entire accordion, which makes all accordion items unclickable and visually faded. You can achieve this using the Disabled parameter.

<LumexAccordion Disabled="@true">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Alternatively, you can prevent user interaction by disabling specific accordion items. You can achieve this using the DisabledItems parameter.

<LumexAccordion DisabledItems="@(["2"])">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Expanded

You can set the entire accordion to be expanded by default when the page is first loaded. You can achieve this using the Expanded parameter.

<LumexAccordion Expanded="@true">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Alternatively, you can set specific accordion items to be expanded by default. You can achieve this using the ExpandedItems parameter.

<LumexAccordion ExpandedItems="@(["2"])">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Multiple

By default, only one accordion item can be expanded at a time. You can enable multiple expansion to allow more than one item to be open simultaneously. You can achieve this using the SelectionMode parameter.

<LumexAccordion SelectionMode="@SelectionMode.Multiple">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Variants

The accordion component supports different visual variants to match your application's style, such as Light, Shadow, Bordered or Splitted. You can achieve this using the Variant parameter.

<LumexAccordion Variant="@AccordionVariant.Light">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion Variant="@AccordionVariant.Shadow">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion Variant="@AccordionVariant.Bordered">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

<LumexAccordion Variant="@AccordionVariant.Splitted">
    <LumexAccordionItem Id="1" Title="Accordion 1">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3" Title="Accordion 3">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Subtitle

You can add a subtitle to provide additional context to the accordion item, enhancing clarity for the user. You can achieve this using the Subtitle or SubtitleContent parameters.

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="Accordion 1"
                        Subtitle="Press to expand">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2" Title="Accordion 2">
        <SubtitleContent>
            <span>
                Press to expand <strong>item 2</strong>
            </span>
        </SubtitleContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="Accordion 3"
                        Subtitle="Press to expand">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Start Content

You can add additional content at the very beginning of an accordion item, such as icons, labels, or other elements. You can achieve this using the StartContent parameter.

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="General Settings"
                        Subtitle="Custom display, sound, privacy, connectivity, updates">
        <StartContent>
            <span class="h-8 w-8 flex items-center justify-center bg-primary text-zinc-50 rounded-lg ring ring-primary/30">
                <LumexIcon Icon="@Icons.Rounded.Settings"
                           Color="@ThemeColor.None" />
            </span>
        </StartContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="2"
                        Title="Advanced Settings"
                        Subtitle="Detailed system, developer, security, network, diagnostics">
        <StartContent>
            <span class="h-8 w-8 flex items-center justify-center bg-secondary text-zinc-50 rounded-lg ring ring-secondary/30">
                <LumexIcon Icon="@Icons.Rounded.Manufacturing"
                           Color="@ThemeColor.None" />
            </span>
        </StartContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="Personal Data"
                        Subtitle="Contacts, messages, photos, account info, preferences">
        <StartContent>
            <span class="h-8 w-8 flex items-center justify-center bg-danger text-zinc-50 rounded-lg ring ring-danger/30">
                <LumexIcon Icon="@Icons.Rounded.ManageAccounts"
                           Color="@ThemeColor.None" />
            </span>
        </StartContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Custom Indicator

Customize the default expand/collapse indicator icon (such as an arrow). You can achieve this using the Indicator parameter.

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="Globe"
                        Indicator="@((_) => Icons.Rounded.Globe)">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2"
                        Title="Star"
                        Indicator="@((_) => Icons.Rounded.Star)">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="Moon"
                        Indicator="@((_) =>Icons.Rounded.Bedtime)">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Since the Indicator parameter is of a delegate type IndicatorResolver, you can control the indicator icon based on the expanded state of the accordion item:

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="Public"
                        Indicator="@((expanded) => expanded ? Icons.Rounded.Public : Icons.Rounded.PublicOff)">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2"
                        Title="Fullscreen"
                        Indicator="@((expanded) => expanded ? Icons.Rounded.CloseFullscreen : Icons.Rounded.OpenInFull)">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="Moon"
                        Indicator="@((expanded) => expanded ? Icons.Rounded.Bedtime : Icons.Rounded.LightMode)">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
}

Two-way Data Binding

The accordion component supports two-way data binding, allowing you to programmatically control which items are expanded and respond to user interactions in real-time. You can achieve this using the @bind-Expanded directive, or the Expanded and ExpandedChanged parameters.

<LumexAccordion>
    <LumexAccordionItem Id="1"
                        Title="Accordion 1"
                        @bind-Expanded="@_itemOneExpanded">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="2"
                        Title="Accordion 2"
                        @bind-Expanded="@_itemTwoExpanded">
        @_content
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="@_itemThreeTitle"
                        Expanded="@_itemThreeExpanded"
                        ExpandedChanged="@OnExpandedChanged">
        @_content
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;

    private bool _itemOneExpanded;
    private bool _itemTwoExpanded;
    private bool _itemThreeExpanded;

    private string _itemThreeTitle = "Accordion 3";

    private void OnExpandedChanged( bool expanded )
    {
        _itemThreeExpanded = expanded;
        _itemThreeTitle = expanded ? "I am expanded" : "I am collapsed";
    }
}

Custom Styles

This component suppots named slots (represented as data-* attributes) that allow you to apply custom CSS to specific parts of the component.

base: The overall container of the accordion item.
heading: The wrappper of the header section that includes the trigger.
trigger: The element that toggles the accordion open or closed.
titleWrapper: The wrappper of both the title and subtitle of the accordion item.
title: The main title of the accordion item.
subtitle: The secondary text beneath the title.
startContent: The content, such as icons, placed at the start of the accordion item.
indicator: The icon that indicates the accordion item’s expanded or collapsed state.
content: The wrappper of the body content of the accordion item.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Class: The basic CSS class name styles the wrapper of the accordion items.
ItemClasses: The CSS class names for the accordion items slots style all the accordion items at once.

Accordion Item

Class: The basic CSS class name styles the wrapper of the accordion item.
Classes: The CSS class names for the accordion item slots style the entire accordion item at once.

<LumexAccordion Variant="@AccordionVariant.Shadow"
                ShowDividers="@false"
                Class="p-2 flex flex-col gap-1 max-w-sm"
                ItemClasses="@_itemClasses">
    <LumexAccordionItem Id="1"
                        Title="Connected Devices">
        <StartContent>
            <LumexIcon Icon="@Icons.Rounded.DesktopWindows"
                       Color="@ThemeColor.Primary" />
        </StartContent>
        <SubtitleContent>
            2 issues to <span class="text-primary">fix now</span>
        </SubtitleContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="2"
                        Title="Apps Permissions"
                        Subtitle="3 apps have read permissions">
        <StartContent>
            <LumexIcon Icon="@Icons.Rounded.Encrypted" />
        </StartContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
    <LumexAccordionItem Id="3"
                        Title="Pending tasks"
                        Subtitle="Complete your profile"
                        Classes="@(new() {Subtitle = "text-warning"})">
        <StartContent>
            <LumexIcon Icon="@Icons.Rounded.Error"
                       Color="@ThemeColor.Warning" />
        </StartContent>
        <ChildContent>
            @_content
        </ChildContent>
    </LumexAccordionItem>
</LumexAccordion>

@code {
    private RenderFragment _content =>
    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;

    private AccordionItemSlots _itemClasses = new()
    {
        Title = "font-medium text-medium",
        Trigger = "px-2 py-0 hover:bg-default-100 rounded-lg h-14",
        Content = "text-small p-2"
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

Accordion 1

Accordion #2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1

Accordion 2

Accordion 3

Accordion 1Press to expand

Accordion 2 Press to expand item 2

Accordion 3Press to expand

General SettingsCustom display, sound, privacy, connectivity, updates

Advanced SettingsDetailed system, developer, security, network, diagnostics

Personal DataContacts, messages, photos, account info, preferences

Globe

Star

Moon

Public

Fullscreen

Moon

Accordion 1

Accordion 2

Accordion 3

Accordion

Accordion Item

Connected Devices 2 issues to fix now

Apps Permissions3 apps have read permissions

Pending tasksComplete your profile

On this page