Tabbed content navigation driven by a TabItem model with built-in state management.

Overview

The Tabs component organizes content into switchable panels. It accepts a collection of TabItem objects and manages the active tab via two-way binding. You can also supply custom TabHeaders and TabContent render fragments for full layout control.

Installation

shellui add tabs

Usage

Basic Tabs with Items

<Tabs Items="@tabs" ActiveTab="@activeTab" ActiveTabChanged="@((string t) => activeTab = t)" />

@code {
    private string activeTab = "account";

    private IEnumerable<TabItem> tabs = new[]
    {
        new TabItem { Id = "account", Label = "Account", Content = "Account settings content." },
        new TabItem { Id = "password", Label = "Password", Content = "Password settings content." }
    };
}

Tabs with Icon

The TabItem model supports an optional Icon property:

<Tabs Items="@tabs" ActiveTab="@activeTab" ActiveTabChanged="@((string t) => activeTab = t)" />

@code {
    private string activeTab = "overview";

    private IEnumerable<TabItem> tabs = new[]
    {
        new TabItem { Id = "overview", Label = "Overview", Icon = "chart-bar" },
        new TabItem { Id = "analytics", Label = "Analytics", Icon = "trending-up" },
        new TabItem { Id = "reports", Label = "Reports", Icon = "file-text" }
    };
}

Custom TabHeaders and TabContent

For full control over rendering, use the TabHeaders and TabContent render fragments:

<Tabs ActiveTab="@activeTab" ActiveTabChanged="@((string t) => activeTab = t)">
  <TabHeaders>
    <button class="@(activeTab == "general" ? "font-bold" : "")"
            @onclick='() => activeTab = "general"'>General</button>
    <button class="@(activeTab == "security" ? "font-bold" : "")"
            @onclick='() => activeTab = "security"'>Security</button>
  </TabHeaders>
  <TabContent>
    @if (activeTab == "general") { <p>General settings</p> }
    @if (activeTab == "security") { <p>Security settings</p> }
  </TabContent>
</Tabs>

@code {
    private string activeTab = "general";
}

Custom Styling

<Tabs Items="@tabs"
      ActiveTab="@activeTab"
      ActiveTabChanged="@((string t) => activeTab = t)"
      Class="w-full" />

API Reference

Tabs

Parameter	Type	Default	Description
`Items`	`IEnumerable<TabItem>?`	`null`	Collection of tab definitions
`ActiveTab`	`string`	`""`	The `Id` of the currently active tab
`ActiveTabChanged`	`EventCallback<string>`	—	Callback when the active tab changes
`TabHeaders`	`RenderFragment?`	`null`	Custom header rendering (overrides `Items`)
`TabContent`	`RenderFragment?`	`null`	Custom content rendering (overrides `Items`)
`Class`	`string?`	`null`	Additional CSS classes

TabItem Model

Property	Type	Description
`Id`	`string`	Unique identifier for the tab
`Label`	`string`	Display text in the tab header
`Icon`	`string?`	Optional icon identifier
`Content`	`string?`	Text content rendered in the panel

Accessibility

Tab headers use role="tablist" with individual role="tab" buttons.
Active tab is indicated with aria-selected="true".
Tab panels use role="tabpanel" linked to their header via aria-labelledby.
Keyboard navigation: Arrow keys move between tabs, Home / End jump to first / last.

Tabs

On this page