Skip to content
navius

Components / Tabs

Tabs

A set of layered sections of content, known as tab panels, that are displayed one at a time.

Account

Make changes to your account here. Click save when you're done.

razor
<NaviusTabs @bind-Value="_tab" DefaultValue="account">
    <NaviusTabsList class="... bg-muted p-1">
        <NaviusTabsTab Value="account"
            class="... data-[active]:bg-background">Account</NaviusTabsTab>
        <NaviusTabsTab Value="password"
            class="... data-[active]:bg-background">Password</NaviusTabsTab>
    </NaviusTabsList>

    <NaviusTabsPanel Value="account">Account settings…</NaviusTabsPanel>
    <NaviusTabsPanel Value="password">Password settings…</NaviusTabsPanel>
</NaviusTabs>

@code { private string? _tab = "account"; }

Features

  • Can be controlled (@bind-Value) or uncontrolled (DefaultValue).
  • Full keyboard navigation with a roving tabindex.
  • Supports horizontal and vertical orientation.
  • Automatic (focus activates) or manual (Enter/Space activates) activation modes.
  • Direction-aware: flips horizontal arrow keys in RTL.

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 tabs

Anatomy

Import the parts and assemble them.

razor
@using Navius.Primitives.Components.Tabs

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

API Reference

Root

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

Prop Type Default
Value string? -
ValueChanged EventCallback<string?> -
DefaultValue string? -
Orientation string "horizontal"
ActivationMode string "automatic"
Dir string? -
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-orientation] "horizontal" | "vertical"

List

Contains the triggers that are aligned along the edge of the active content. Renders a div.

Prop Type Default
Loop bool true
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-orientation] "horizontal" | "vertical"

Tab

The button that activates its associated panel. Renders a button.

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

Data attributes

Data attribute Values
[data-active] Present on the active tab.
[data-orientation] "horizontal" | "vertical"
[data-disabled] Present when disabled

Panel

Contains the content associated with each tab. Renders a div.

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

Data attributes

Data attribute Values
[data-hidden] Present when the panel is not the active one.
[data-orientation] "horizontal" | "vertical"

Accessibility

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

Keyboard interactions

Key Description
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).