Accordion Component

The Ignite UI for Blazor Accordion is a layout component for organizing expandable content panels in a single vertical container.

Live Demo

Anatomy

The accordion structure consists of an accordion container with one or more expansion panel children.

igc-accordion                    // host - manages a set of expansion panels
└─ igc-expansion-panel            // child panel
   ├─ [slot="title"]              // panel header title
   ├─ [slot="subtitle"]           // optional header subtitle
   ├─ [slot="indicator"]          // custom collapsed/default indicator
   ├─ [slot="indicator-expanded"] // optional custom expanded-state indicator
   └─ default slot                // expandable panel content

Getting Started

Use the accordion with the Ignite UI for Blazor version installed in your application. Complete the shared Getting Started topic before adding framework-specific imports or registration.

Register the accordion module in Program.cs and add the theme stylesheet to your host page.

builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Usage

Build the accordion by placing one or more IgbExpansionPanel components inside an IgbAccordion container.

Single Expansion

Set SingleExpand to switch between one-open-panel behavior and multiple-open-panel behavior.

<IgbAccordion SingleExpand=true>
  <IgbExpansionPanel>
    <span slot="title">Title Panel 1</span>
    <p>Content Panel 1</p>
  </IgbExpansionPanel>
  <IgbExpansionPanel>
    <span slot="title">Title Panel 2</span>
    <p>Content Panel 2</p>
  </IgbExpansionPanel>
</IgbAccordion>

Programmatic Expansion

Use HideAll and ShowAll to collapse or expand all available panels programmatically.

<IgbButton @onclick="ShowAll">Show All</IgbButton>
<IgbButton @onclick="HideAll">Hide All</IgbButton>

<IgbAccordion @ref="accordion">
  <IgbExpansionPanel>
    <span slot="title">Title Panel 1</span>
    <p>Content Panel 1</p>
  </IgbExpansionPanel>
  <IgbExpansionPanel>
    <span slot="title">Title Panel 2</span>
    <p>Content Panel 2</p>
  </IgbExpansionPanel>
</IgbAccordion>

@code {
    private IgbAccordion accordion;

    private async Task ShowAll() => await accordion.ShowAllAsync();

    private async Task HideAll() => await accordion.HideAllAsync();
}

Customize Panel Content

Customize the panel headers and content through the underlying IgbExpansionPanel slots.

<IgbAccordion>
  <IgbExpansionPanel Open>
    <span slot="title">Billing</span>
    <span slot="subtitle">Payment and invoice settings</span>
    <p>Update payment methods, billing contacts, and invoice delivery options.</p>
  </IgbExpansionPanel>
</IgbAccordion>

Nest Accordions

Nest an accordion inside an expansion panel when you need a second level of grouped disclosure.

<IgbAccordion>
  <IgbExpansionPanel Open>
    <span slot="title">Workspace Settings</span>
    <IgbAccordion>
      <IgbExpansionPanel>
        <span slot="title">Notifications</span>
        <p>Configure email and product notification preferences.</p>
      </IgbExpansionPanel>
    </IgbAccordion>
  </IgbExpansionPanel>
</IgbAccordion>

Do/Don’t

When to use: Use the accordion when you need to organize secondary content, FAQ entries, settings groups, or other related vertical sections that users expand on demand. Keep panel titles short and descriptive, and enable single-expansion behavior when users should focus on one section at a time.

When not to use: Use the Expansion Panel when you need a single standalone expandable section instead of a coordinated container that manages multiple panels together. Do not use an accordion to hide essential primary content or to group unrelated sections.

Do	Don’t

Properties

The accordion exposes container-level controls; panel-specific state is configured on each IgbExpansionPanel.

Methods

Use the accordion methods when you need to change panel state from your code.

Styling

Style the Blazor accordion with CSS parts and Ignite UI theme variables.

Style the accordion by targeting the parts exposed by its child IgbExpansionPanel components.

Styling Variables

Use Ignite UI for Blazor theme CSS variables as values when styling the expansion panel parts.

igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(indicator),
igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}

CSS Parts

Styling with Tailwind

Use Tailwind utility classes with CSS part selectors when you want to keep the styling close to the component markup.

Accessibility

The accordion supports keyboard interaction for moving focus between panels and changing their expanded state.

Keyboard Interaction

Use the keyboard shortcuts below to move through the accordion and open or close panels.

Screen Readers / ARIA

The accordion’s accessibility semantics are provided through its child expansion panels and their headers.

• Each panel header exposes role="button", aria-expanded, and aria-controls.
• Each panel body exposes role="region" and a label through aria-labelledby or aria-label.
• Use clear title text for each panel so assistive technologies can announce a meaningful label.
• Keep interactive content inside panel bodies in a logical tab order.

Accessibility Compliance

Infragistics documents Ignite UI for Blazor accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic. The accordion’s compliance evidence comes from the child IgbExpansionPanel components that provide the interactive headers and regions.

Your responsibilities:

• Provide panel titles that describe the content behind each disclosure area.
• Preserve a logical focus order in the surrounding page layout.
• Validate any custom styling against your application’s contrast and focus-indicator requirements.

API References

Dependencies

The accordion depends on IgbExpansionPanel for its visible sections.

The accordion also depends on the shared theme stylesheet for its default appearance.

Additional Resources

Use these resources to continue with Ignite UI for Blazor Accordion support, source, and related layout guidance.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub

Related Components

• Expansion Panel - The collapsible section the accordion is built from. See it for configuring individual panels.

FAQ