navius

Components / Accordion

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Yes. It follows the WAI-ARIA Accordion pattern, with full keyboard support and the correct aria roles wired up automatically.

razor
<NaviusAccordion Type="single" Collapsible @bind-Value="_open"
                 class="w-full divide-y divide-border rounded-lg border">
    @foreach (var item in _items)
    {
        <NaviusAccordionItem Value="@item.Value">
            <NaviusAccordionHeader class="flex">
                <NaviusAccordionTrigger class="... group/trigger flex flex-1 justify-between">
                    @item.Question
                    <svg class="group-data-[panel-open]/trigger:rotate-180">…</svg>
                </NaviusAccordionTrigger>
            </NaviusAccordionHeader>
            <NaviusAccordionPanel class="overflow-hidden navius-accordion-content">
                <div class="px-4 pb-4">@item.Answer</div>
            </NaviusAccordionPanel>
        </NaviusAccordionItem>
    }
</NaviusAccordion>

@code { private string? _open = "item-1"; }

Features

  • Single (Type="single") or multiple (Type="multiple") open items.
  • Can be controlled (@bind-Value / @bind-Values) or uncontrolled (DefaultValue / DefaultValues).
  • Full keyboard navigation with roving focus between triggers; Orientation- and Dir-aware arrow keys.
  • Single mode honours Collapsible: by default the open item cannot close itself.
  • The engine writes the measured size to a CSS variable, so you can animate height with plain CSS.

Installation

Install the brain, or copy just this primitive in with the CLI.

Terminal bash
navius add accordion

Anatomy

Import the parts and assemble them.

razor
@using Navius.Primitives.Components.Accordion

<NaviusAccordion>
    <NaviusAccordionItem>
        <NaviusAccordionHeader>
            <NaviusAccordionTrigger />
        </NaviusAccordionHeader>
        <NaviusAccordionPanel />
    </NaviusAccordionItem>
</NaviusAccordion>

API Reference

Root

Contains all the parts of an accordion. Renders a div.

Prop Type Default
Type string "single"
Value string? -
ValueChanged EventCallback<string?> -
Values IEnumerable<string>? -
ValuesChanged EventCallback<IEnumerable<string>> -
DefaultValue string? -
DefaultValues IEnumerable<string>? -
Collapsible bool false
Disabled bool false
Orientation string "vertical"
Dir string? -
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-orientation] "vertical" | "horizontal"
[data-disabled] Present when the accordion is disabled

Item

Contains all the parts of a collapsible section. Renders a div.

Prop Type Default
Value string ""
Disabled bool false
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-open] Present while open.
[data-disabled] Present when the item is disabled
[data-orientation] "vertical" | "horizontal"

Header

Wraps the Trigger in a heading element (h1–h6). Renders an h3 by default.

Prop Type Default
Level int 3
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-open] Present while open.
[data-disabled] Present when the item is disabled
[data-orientation] "vertical" | "horizontal"

Trigger

Toggles the collapsed state of its item. Renders a button.

Prop Type Default
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-panel-open] Present while the item's panel is open.
[data-disabled] Present when the item is disabled
[data-orientation] "vertical" | "horizontal"

Panel

The collapsible panel revealed when its item is open. Renders a div with role=region.

Prop Type Default
KeepMounted bool false
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-open] Present while open.
[data-closed] Present while closing (through the exit transition).
[data-starting-style] Present at the start of the open transition.
[data-ending-style] Present at the start of the close transition.
[data-disabled] Present when the item is disabled
[data-orientation] "vertical" | "horizontal"

While mounted, the engine writes --accordion-panel-width and --accordion-panel-height (px) on the panel element so CSS width/height animations have a target to read.

Accessibility

Adheres to the accordion WAI-ARIA design pattern.

Keyboard interactions

Key Description
Space When focus is on a trigger, toggles the item open or closed.
Enter When focus is on a trigger, toggles the item open or closed.
Tab Moves focus to the next focusable element.
ArrowDown Moves focus to the next trigger (vertical orientation).
ArrowUp Moves focus to the previous trigger (vertical orientation).
ArrowRight Moves focus to the next trigger (horizontal orientation, dir-aware).
ArrowLeft Moves focus to the previous trigger (horizontal orientation, dir-aware).
Home Moves focus to the first trigger.
End Moves focus to the last trigger.