Accordion

<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

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

navius add accordion

Anatomy

Import the parts and assemble them.

@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.

Data attributes

Item

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

Data attributes

Header

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

Data attributes

Trigger

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

Data attributes

Panel

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

Data attributes

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

Implements the roles, states, and keyboard map of the accordion WAI-ARIA APG pattern. Covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions