Components / Collapsible

Collapsible

An interactive component which expands and collapses a panel.

@lzitser23 starred 3 repositories

@navius/primitives

razor

<NaviusCollapsible @bind-Open="_open">
    <NaviusCollapsibleTrigger>Toggle</NaviusCollapsibleTrigger>
    <NaviusCollapsiblePanel class="data-[closed]:hidden">
        <div>@navius/colors</div>
        <div>@navius/engine</div>
    </NaviusCollapsiblePanel>
</NaviusCollapsible>

@code { private bool _open; }

Features

Full keyboard navigation.
Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
Publishes --collapsible-panel-height / -width so CSS height/width transitions work as a drop-in.
KeepMounted keeps the panel mounted while closed so exit animations can run.

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.

Terminal bash

navius add collapsible

Anatomy

Import the parts and assemble them.

razor

@using Navius.Primitives.Components.Collapsible

<NaviusCollapsible>
    <NaviusCollapsibleTrigger />
    <NaviusCollapsiblePanel />
</NaviusCollapsible>

API Reference

Root

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

Prop	Type	Default
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
Disabled	bool	false
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-disabled]	Present when disabled

Trigger

The button that toggles the collapsible. Renders a button.

Prop	Type	Default
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-panel-open]	Present while the panel is open.
[data-disabled]	Present when disabled

Panel

The panel that expands and collapses. Renders a div when open (or always, with KeepMounted).

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 disabled

Accessibility

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

Keyboard interactions

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.