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

Install the brain, or copy just this primitive in with the CLI.

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

Adheres to the tabs WAI-ARIA design pattern.

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