SummitUI Logo SummitUI
Tabs
Component

Tabs

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

Demo

Account Settings

Manage your account information and preferences here.

Features

  • Full keyboard navigation
  • Horizontal and vertical orientations
  • Auto and manual activation modes
  • Controlled and uncontrolled modes
  • Disabled tabs support
  • WCAG compliant with proper ARIA attributes

Installation

bash
dotnet add package SummitUI

Anatomy

Import the components and structure them as follows:

razor
<SmTabsRoot DefaultValue="tab1">
    <SmTabsList>
        <SmTabsTrigger Value="tab1">Tab 1</SmTabsTrigger>
        <SmTabsTrigger Value="tab2">Tab 2</SmTabsTrigger>
    </SmTabsList>
    <SmTabsContent Value="tab1">Content 1</SmTabsContent>
    <SmTabsContent Value="tab2">Content 2</SmTabsContent>
</SmTabsRoot>

Sub-components

TabsRoot

Root container managing tabs state.

TabsList

Container for tab triggers (tablist role).

TabsTrigger

Individual tab button (tab role).

TabsContent

Tab content panel (tabpanel role).

API Reference

TabsRoot

Property Type Default Description
Value string? null Controlled active tab value
DefaultValue string? null Default active tab (uncontrolled)
ValueChanged EventCallback<string?> - Value change callback
OnValueChange EventCallback<string?> - Tab activation callback
Orientation TabsOrientation Horizontal Affects keyboard navigation
ActivationMode TabsActivationMode Auto Auto (on focus) or Manual (on Enter/Space)
Loop bool true Whether keyboard nav loops

TabsList

Property Type Default Description
As string "div" HTML element

TabsTrigger

Property Type Default Description
Valuerequired string - Unique tab identifier
As string "button" HTML element
Disabled bool false Disable this tab

TabsContent

Property Type Default Description
Valuerequired string - Matching TabsTrigger value
As string "div" HTML element

Examples

Basic Usage

razor
<SmTabsRoot DefaultValue="account">
    <SmTabsList class="tabs-list">
        <SmTabsTrigger Value="account" class="tabs-trigger">Account</SmTabsTrigger>
        <SmTabsTrigger Value="password" class="tabs-trigger">Password</SmTabsTrigger>
    </SmTabsList>
    
    <SmTabsContent Value="account" class="tabs-content">
        <h3>Account Settings</h3>
        <p>Manage your account information here.</p>
    </SmTabsContent>
    <SmTabsContent Value="password" class="tabs-content">
        <h3>Password Settings</h3>
        <p>Change your password and security options.</p>
    </SmTabsContent>
</SmTabsRoot>

Vertical Orientation

Use vertical orientation for sidebar-style navigation.

razor
<SmTabsRoot DefaultValue="general" Orientation="TabsOrientation.Vertical">
    <div class="tabs-container-vertical">
        <SmTabsList class="tabs-list-vertical">
            <SmTabsTrigger Value="general">General</SmTabsTrigger>
            <SmTabsTrigger Value="privacy">Privacy</SmTabsTrigger>
            <SmTabsTrigger Value="security">Security</SmTabsTrigger>
        </SmTabsList>
        
        <div class="tabs-content-container">
            <SmTabsContent Value="general">General settings...</SmTabsContent>
            <SmTabsContent Value="privacy">Privacy settings...</SmTabsContent>
            <SmTabsContent Value="security">Security settings...</SmTabsContent>
        </div>
    </div>
</SmTabsRoot>

Controlled Mode

Control the active tab externally.

razor
@code {
    private string activeTab = "overview";
}

<SmTabsRoot Value="@activeTab" ValueChanged="@(v => activeTab = v)">
    <SmTabsList>
        <SmTabsTrigger Value="overview">Overview</SmTabsTrigger>
        <SmTabsTrigger Value="details">Details</SmTabsTrigger>
    </SmTabsList>
    
    <SmTabsContent Value="overview">Overview content...</SmTabsContent>
    <SmTabsContent Value="details">Details content...</SmTabsContent>
</SmTabsRoot>

<p>Active tab: @activeTab</p>
<button @onclick="@(() => activeTab = "details")">Go to Details</button>

Disabled Tabs

Disable specific tabs.

razor
<SmTabsRoot DefaultValue="active1">
    <SmTabsList>
        <SmTabsTrigger Value="active1">Active Tab</SmTabsTrigger>
        <SmTabsTrigger Value="disabled" Disabled="true">Disabled Tab</SmTabsTrigger>
        <SmTabsTrigger Value="active2">Another Active</SmTabsTrigger>
    </SmTabsList>
    
    <SmTabsContent Value="active1">This tab is accessible.</SmTabsContent>
    <SmTabsContent Value="disabled">This content is not accessible.</SmTabsContent>
    <SmTabsContent Value="active2">This tab is also accessible.</SmTabsContent>
</SmTabsRoot>

Styling

Data Attributes

Attribute Values Description
data-state "active" | "inactive" Tab/panel activation state
data-disabled Present when disabled Tab is disabled
data-orientation "horizontal" | "vertical" Current orientation

CSS Example

css
/* Tab list styles */
.tabs-list {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    gap: 4px;
}

/* Tab trigger styles */
.tabs-trigger {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
}

.tabs-trigger:hover {
    color: #333;
    background: #f5f5f5;
}

.tabs-trigger[data-state="active"] {
    color: #0066cc;
    border-bottom-color: #0066cc;
}

.tabs-trigger[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tab content styles */
.tabs-content {
    padding: 24px;
}

.tabs-content[data-state="inactive"] {
    display: none;
}

Accessibility

Keyboard Navigation

Key Action
ArrowRight / ArrowDown Move focus to next tab
ArrowLeft / ArrowUp Move focus to previous tab
Home Move focus to first tab
End Move focus to last tab
Enter / Space Activate focused tab (manual mode)

ARIA Attributes

  • TabsList: Has role="tablist" with aria-orientation
  • TabsTrigger: Has role="tab" with aria-selected and aria-controls
  • TabsContent: Has role="tabpanel" with aria-labelledby
An unhandled error has occurred. Reload X