Tabs

Overview

Tabs is a set of layered sections of content, displayed one at a time. It can be controlled (@bind-Value) or uncontrolled (DefaultValue), supports horizontal and vertical orientation, and offers automatic (focus activates) or manual (Enter/Space activates) activation modes.

Anatomy

@using Navius.Primitives.Components.Tabs

<NaviusTabs>
    <NaviusTabsList>
        <NaviusTabsTab Value="tab-1" />
    </NaviusTabsList>
    <NaviusTabsPanel Value="tab-1" />
</NaviusTabs>

Root

Contains all the parts of a tab group. Renders a div.

Prop	Type	Default	Description
Value	string?	-	Controlled selected value. Pair with ValueChanged (@bind-Value).
ValueChanged	EventCallback<string?>	-	Fires when the controlled Value should change.
DefaultValue	string?	-	Initial selected value when used uncontrolled.
Orientation	string	"horizontal"	"horizontal" or "vertical".
ActivationMode	string	"automatic"	"automatic": focusing a tab via the keyboard activates it. "manual": arrow keys move focus only; activation requires Enter/Space/click.
Dir	string?	-	Reading direction ("ltr" | "rtl"). Flips horizontal arrow-key semantics in RTL.
ChildContent	RenderFragment?	-	The tab group’s parts.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered div.

List

Contains the triggers that are aligned along the edge of the active content. Renders a div with role="tablist".

Prop	Type	Default	Description
Loop	bool	true	When true, arrow navigation wraps at the edges; false stops at first/last.
ChildContent	RenderFragment?	-	The Tab triggers.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered div.

Tab

The button that activates its associated panel. Renders a button with role="tab".

Prop	Type	Default	Description
Value	string	""	This tab’s value, matched against the panel with the same value.
Disabled	bool	false	Disables the tab.
ChildContent	RenderFragment?	-	Tab label content.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered button.

Panel

Contains the content associated with each tab. Renders a div with role="tabpanel".

Prop	Type	Default	Description
Value	string	""	The value matched against the active Tab.
KeepMounted	bool	false	Keeps the panel mounted while inactive (data-hidden + the hidden attribute) for external animation.
ChildContent	RenderFragment?	-	Panel content.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered div.

Data attributes

Part	Attribute	Description
Root	data-orientation	"horizontal" | "vertical"
Root	data-activation-direction	"left" | "right" | "up" | "down" | "none", the direction of the last selection change.
List	data-orientation	"horizontal" | "vertical"
List	data-activation-direction	"left" | "right" | "up" | "down" | "none"
Tab	data-active	Present on the active tab.
Tab	data-orientation	"horizontal" | "vertical"
Tab	data-activation-direction	"left" | "right" | "up" | "down" | "none"
Tab	data-disabled	Present when disabled.
Panel	data-hidden	Present when the panel is not the active one.
Panel	data-index	The panel’s 0-based registration index.
Panel	data-orientation	"horizontal" | "vertical"
Panel	data-activation-direction	"left" | "right" | "up" | "down" | "none"

Keyboard interactions

Key	Behavior
Tab	Moves focus to the active trigger. From a trigger, moves focus out of the list to the active panel.
ArrowDown	In vertical orientation, moves focus to the next trigger.
ArrowRight	In horizontal orientation, moves focus to the next trigger.
ArrowUp	In vertical orientation, moves focus to the previous trigger.
ArrowLeft	In horizontal orientation, moves focus to the previous trigger.
Home	Moves focus to the first trigger.
End	Moves focus to the last trigger.
Enter	Activates the focused trigger (in manual activation mode).
Space	Activates the focused trigger (in manual activation mode).

ARIA mechanism

The List wires role="tablist"; each Tab wires role="tab" with aria-selected and aria-controls pointing at its Panel, using roving tabindex so only the active tab stop is in the Tab order. Each Panel wires role="tabpanel" with aria-labelledby pointing back at its Tab. This implements the roles, states, and keyboard map of the WAI-ARIA APG tabs pattern and is covered by the Playwright browser test suite and gated by axe-core in CI.