Skip to main content

DxAccordion Class

A side navigation control that can organize items into collapsible groups.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor


public class DxAccordion :


The DevExpress Accordion component for Blazor (<DxAccordion>) displays hierarchical data structures within collapsible groups. Use this control to add layout management or navigation capabilities to your application.

Blazor Navigation Landing Accordion

Run Demo: Accordion

Add an Accordion to a Project

Follow the steps below to add the Accordion component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxAccordion></DxAccordion> markup to a .razor file.
  3. Configure the component: add items or bind the Accordion to data, handle expand/collapse events, customize items, and so on (see the sections below).

Watch Video: Get Started with Accordion

Unbound Mode (Items)

The <DxAccordion> component supports bound and unbound modes. In unbound mode, the developer should write markup that adds individual elements to the Accordion’s Items collection. Each item can have its own collection of child items (Items).

A DxAccordionItem class instance defines an item in code, and the Name property specifies its unique name. Use the Text property to specify the item’s text, the IconCssClass property to specify a CSS class for the item’s icon, and the NavigateUrl property to specify the URL to navigate to when a user clicks an item.

    @* Root items *@
        <DxAccordionItem Text="Shapes" Expanded="true">
            @* Nested items *@
                <DxAccordionItem Text="Circle" />
                <DxAccordionItem Text="Triangle" />
                <DxAccordionItem Text="Square" />
        <DxAccordionItem Text="Templates" />

Accordion items

Data Binding

You can populate the Accordion component with items from a data source.

Follow the steps below to bind Accordion to data:

  1. Use the Data property to specify a data source. You can use different collection types:

    • Flat data (a collection of items organized as a single-level structure)
    • Hierarchical data (a collection of nested items)
  2. Add the DataMappings tag to the component’s markup.

  3. Create the DxAccordionDataMapping instance and map item properties (HasChildren, NavigateUrl, and so on) to data source fields. Mappings are used to assign data from the source collection to the component’s data model.

    • For flat data collections, use the Key and ParentKey properties to create a hierarchy of items. If the Accordion’s structure is linear, you can omit these properties.

    • For hierarchical data collections, the Children property is required to build the data model.

    You can create multiple DxAccordionDataMapping instances to specify different mappings for different nesting levels. Use the Level property to specify the item level for which data mappings are applied.

Flat Data

The code below binds the Accordion to a flat collection of data items. It specifies mappings for the Text, Key, and ParentKey properties.

<DxAccordion Data="Data">
        <DxAccordionDataMapping Text="Name"
                                ParentKey="CategoryId" />

@code {
    List<FlatDataItem> Data { get; set; }

    protected override void OnInitialized() {
        IEnumerable<ProductFlat> products = ProductData.Products;
        IEnumerable<ProductCategory> productSubcategories = ProductData.Categories;

        Data = new List<FlatDataItem>(Enum.GetValues<ProductCategoryMain>().Select(i => new FlatDataItem() { Name = i.ToString(), Id = i }));
        Data.AddRange(products.Select(i => new FlatDataItem() { Name = i.ProductName, Id = i.Id, CategoryId = i.ProductCategoryId }));
        Data.AddRange(productSubcategories.Select(i => new FlatDataItem() { Name = i.Subcategory, Id = i.SubcategoryID, CategoryId = i.Category }));

Bound to Flat Data Accordion

Hierarchical Data

The code below binds the Accordion to the collection of ChemicalElementGroup objects. Each object can have child objects. The code specifies the Children and Text mappings to adjust the Accordion’s data model to the specified data source.

<DxAccordion Data="@ChemicalElements.Groups">
        <DxAccordionDataMapping Children="Groups"

Bound to Hierarchical Data Accordion

Run Demo: Accordion - Data Binding Watch Video: Data Binding in Navigation Components

Expand and Collapse Items

Users can click the Accordion item’s header or expand/collapse button to change the expansion state. Use the ExpandCollapseAction property to choose the action that expands or collapses the item.

See the related API members below:

Specifies the user action that expands or collapses the item.
Specifies how many items can be expanded at a time.
Specifies whether the item is expanded.
Specifies the CSS class name for a root item’s Expand button icon.
Specifies the CSS class name for a root item’s Collapse button icon.
Specifies where the Accordion component displays its expand button for root items.
Specifies the CSS class name for a subitem’s Collapse button icon.
Specifies the CSS class name for a subitem’s Expand button icon.
Specifies where the Accordion component displays expand and collapse buttons for nested items.
Collapses all items.
Expands all items.
ExpandToItem(Func<IAccordionItemInfo, Boolean>)
Expands items down to the specified item.
GetItemExpanded(Func<IAccordionItemInfo, Boolean>)
Returns whether the specified item is expanded.
SetItemExpanded(Func<IAccordionItemInfo, Boolean>, Boolean)
Expands or collapses the specified node.

The following events fire when an item’s state changes:

Fires after an item was collapsed.
Fires after an item was expanded.
Fires when an item is about to be collapsed and allows you to cancel the action.
Fires when an item is about to be expanded and allows you to cancel the action.
Fires when an Accordion’s item expands or collapses.

Filter Items

Enable the ShowFilterPanel option to activate the filter panel. If a user types in a search string, the component displays matching items and their parent and child items. Note that if you activate the filter option with the enabled LoadChildItemsOnDemand option, the component loads all its items into memory.

<DxAccordion ShowFilterPanel="true">
    @* ... *@

Allow users to filter

You can also use the FilterString property to specify the filter criteria in code.

In addition to default filter logic, you can specify the CustomFilter property to enable heuristic algorithms.

Run Demo: Accordion - Data Binding

Load Child Items On Demand

If you set the LoadChildItemsOnDemand property to true, the Accordion loads an item’s children when the item is expanded for the first time. This mode improves the Accordion’s performance if the bound data structure contains a large number of items.

You can load child items on demand in either bound or unbound mode. Note that bound mode works with hierarchical structures only and requires the HasChildren property. The component uses this property to determine how to render items before they are expanded for the first time (for example, whether expand buttons should appear).

<DxAccordion Data="@Data" LoadChildItemsOnDemand="true">
        <DxAccordionDataMapping Text="Name"


Use the following templates to specify appearance of all items:

Specifies a content template for all Accordion items.
Specifies a header text template for all Accordion items.
Specifies the template used to display Accordion items.

In unbound mode, you can create templates for individual items. These templates have priority over common templates. Use the following <DxAccordionItem> properties:

Specifies a template for the Accordion item’s content.
Specifies a template for the Accordion item’s header text.
Specifies the template used to display the Accordion item.

The following example shows how to apply the ItemTemplate:

    .my-class {
        margin-bottom: 5px;
<div class="cw-480">
    <DxAccordion Data=@DataSource>
            <DxAccordionDataMapping Key="LastName" 
                                    Text="LastName" />
                var dataItem = (Employee)context.DataItem;
            <div class="my-class">
                <EmployeeCard EmployeeInfo=dataItem />

Template for all items

Select Items

Set the SelectionMode property value to Single to allow item selection. Accordion items can be selected in the following ways:

  • Users can click item headers to select them.
  • You can call the SelectItem method to select an item from code.
  • The component can automatically select an item based on the item’s NavigateUrl and the current browser URL. Use the UrlMatchMode property to enable this functionality.
<DxAccordion SelectionMode="NavigationSelectionMode.Single">
        <DxAccordionItem Text="Shapes">
                <DxAccordionItem Text="Circle" />
                <DxAccordionItem Text="Square" />
        <DxAccordionItem Text="Templates" />

Accordion with single selection

To react to selection changes, handle the SelectionChanged event. Call the ClearSelection() method to clear the collection of selected items.

Run Demo: Accordion - Select Items

Use the NavigateUrl property to specify a URL where the client web browser navigates in response to a click on an item. To specify the URL display target (that is, the current window, new tab, and so on), use the Target property:

In the example below, the Grid item’s NavigateUrl is opened in a new tab:

        <DxAccordionItem Text="Grid" NavigateUrl=""
                         Target="_blank" />
        <DxAccordionItem Text="Navigation and Layout" />
        <DxAccordionItem Text="Data Editors" />
        <DxAccordionItem Text="Scheduler" />

The component can automatically select and expand to an item based on the item’s NavigateUrl property value and the current browser URL. Use the UrlMatchMode property and set the SelectionMode property value to Single to enable this functionality.

In the following example, the Accordion selects an item if the NavigateUrl property value matches the current page’s address:

<div class="p-2">
    <DxAccordion UrlMatchMode="NavigationUrlMatchMode.Exact" 
            <DxAccordionItem Text="Shapes" NavigateUrl="shapes">
                    <DxAccordionItem Text="Circle" />
                    <DxAccordionItem Text="Square" />
            <DxAccordionItem Text="Templates" />

Url Match Mode Result

You can also use the DxAccordionItem.UrlMatchMode property to specify this option for individual items.

View Example: Use the Accordion to organize navigation in the application


If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.


See Also