Accordion

Overview

Accordion is a vertically stacked set of interactive headings that each reveal a section of content. It supports single (Type="single", the default) or multiple (Type="multiple") open items, can be controlled (@bind-Value / @bind-Values) or uncontrolled (DefaultValue / DefaultValues), and provides roving-focus keyboard navigation between triggers that is orientation- and dir-aware.

Anatomy

@using Navius.Primitives.Components.Accordion

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

Root

Contains all the parts of an accordion. Cascades an AccordionContext to the parts. Renders a div.

Prop	Type	Default	Description
Type	string	"single"	"single" or "multiple".
Value	string?	-	Controlled open value for Type="single". Pair with ValueChanged (@bind-Value).
ValueChanged	EventCallback<string?>	-	Fires with the new open value (Type="single") when it changes.
Values	IEnumerable<string>?	-	Controlled open values for Type="multiple". Pair with ValuesChanged (@bind-Values).
ValuesChanged	EventCallback<IEnumerable<string>>	-	Fires with the new open values (Type="multiple") when they change.
DefaultValue	string?	-	Uncontrolled initial open value for Type="single".
DefaultValues	IEnumerable<string>?	-	Uncontrolled initial open values for Type="multiple".
Collapsible	bool	false	Type="single" only: when false (the default) the open item cannot close itself.
Disabled	bool	false	Disables the whole accordion; cascades to every item and trigger.
Orientation	string	"vertical"	"vertical" or "horizontal". Drives arrow-key direction and data-orientation.
Dir	string?	-	"ltr" or "rtl". Reverses horizontal arrow-key mapping under rtl. Falls back to the cascaded direction.
ChildContent	RenderFragment?	-	The accordion’s items.

Item

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

Prop	Type	Default	Description
Value	string	""	Uniquely identifies this section. Used to derive the trigger/panel ids.
Disabled	bool	false	Disables this section: its trigger can’t toggle or receive focus.
ChildContent	RenderFragment?	-	The Header and Panel.

Header

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

Prop	Type	Default	Description
Level	int	3	Heading level 1-6.
ChildContent	RenderFragment?	-	The Trigger.

Trigger

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

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	Trigger label content.

Panel

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

Prop	Type	Default	Description
KeepMounted	bool	false	Keeps the panel mounted (hidden) while closed instead of removing it from the DOM.
ChildContent	RenderFragment?	-	The panel’s content.

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.

Data attributes

Part	Attribute	Description
Root	data-orientation	"vertical" | "horizontal".
Root	data-disabled	Present when the accordion is disabled.
Item	data-open	Present while the item is open.
Item	data-disabled	Present when the item is disabled (root-disabled cascades).
Header	data-open	Present while the item is open.
Header	data-disabled	Present when the item is disabled.
Trigger	data-panel-open	Present while the item’s panel is open.
Trigger	data-disabled	Present when the item is disabled.
Panel	data-open	Present while open.
Panel	data-closed	Present while closing (through the exit transition).
Panel	data-starting-style	Present at the start of the open transition.
Panel	data-ending-style	Present at the start of the close transition.
Panel	data-orientation	"vertical" | "horizontal".
Panel	data-disabled	Present when the item is disabled.

Keyboard interactions

Key	Behavior
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 enabled trigger.
End	Moves focus to the last enabled trigger.

ARIA mechanism

Each Trigger wires aria-expanded and aria-controls pointing at its Panel’s id, and aria-disabled plus the native disabled attribute when its item is disabled. Each Panel renders role="region" and aria-labelledby pointing at its Trigger’s id. Arrow keys, Home, and End move focus between enabled triggers in DOM order, wrapping at the ends. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.