Tabs

Accessible tab group with roving tabindex and full keyboard navigation.

Basic Tabs

Click or use Left / Right / Home / End. Disabled tabs are skipped.

Account

Manage your account settings and preferences.

<BitBhTabGroup class="flex w-full flex-col gap-4">
    <BitBhTabList class="flex border-b border-zinc-200 gap-1">
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Account</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Profile</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Notifications</BitBhTab>
    </BitBhTabList>
    <BitBhTabPanels class="mt-2">
        <BitBhTabPanel class="py-2 text-zinc-900">
            <h3 class="text-sm font-semibold text-zinc-900">Account</h3>
            <p class="text-sm text-zinc-500">Manage your account settings and preferences.</p>
        </BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900">
            <h3 class="text-sm font-semibold text-zinc-900">Profile</h3>
            <p class="text-sm text-zinc-500">Update your public profile information.</p>
        </BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900">
            <h3 class="text-sm font-semibold text-zinc-900">Notifications</h3>
            <p class="text-sm text-zinc-500">Choose what alerts you'd like to receive.</p>
        </BitBhTabPanel>
    </BitBhTabPanels>
</BitBhTabGroup>

Vertical Orientation

Set Vertical="true". The data-orientation-vertical: variant flips the layout.

General

Application-wide settings.

<BitBhTabGroup Vertical="true" class="flex w-full items-start gap-6">
    <BitBhTabList class="flex flex-col border-r border-zinc-200 min-w-48">
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-r-2 border-transparent text-start px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">General</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-r-2 border-transparent text-start px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Security</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-r-2 border-transparent text-start px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Integrations</BitBhTab>
    </BitBhTabList>
    <BitBhTabPanels class="flex-1">
        <BitBhTabPanel class="py-2 text-zinc-900">
            <h3 class="text-sm font-semibold text-zinc-900">General</h3>
            <p class="text-sm text-zinc-500">Application-wide settings.</p>
        </BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900">
            <h3 class="text-sm font-semibold text-zinc-900">Security</h3>
            <p class="text-sm text-zinc-500">Two-factor auth, sessions, and audit log.</p>
        </BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900">
            <h3 class="text-sm font-semibold text-zinc-900">Integrations</h3>
            <p class="text-sm text-zinc-500">Connect third-party services.</p>
        </BitBhTabPanel>
    </BitBhTabPanels>
</BitBhTabGroup>

Manual Activation

With Manual="true" arrow keys move focus only — press Space or Enter to activate.

Inbox content

<BitBhTabGroup Manual="true" class="flex w-full flex-col gap-4">
    <BitBhTabList class="flex border-b border-zinc-200 gap-1">
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Inbox</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Sent</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Drafts</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Archive</BitBhTab>
    </BitBhTabList>
    <BitBhTabPanels class="mt-2">
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Inbox content</p></BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Sent content</p></BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Drafts content</p></BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Archive content</p></BitBhTabPanel>
    </BitBhTabPanels>
</BitBhTabGroup>

Disabled Tab

data-disabled: dims the tab; arrow-key navigation skips it.

Free plan features.

<BitBhTabGroup class="flex w-full flex-col gap-4">
    <BitBhTabList class="flex border-b border-zinc-200 gap-1">
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Free</BitBhTab>
        <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Pro</BitBhTab>
        <BitBhTab Disabled="true"
               class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Enterprise (coming soon)</BitBhTab>
    </BitBhTabList>
    <BitBhTabPanels class="mt-2">
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Free plan features.</p></BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Pro plan features.</p></BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Enterprise plan features.</p></BitBhTabPanel>
    </BitBhTabPanels>
</BitBhTabGroup>

Render Context (state-driven content)

Context="t" exposes t.IsSelected for state-driven badges.

Direct messages

<BitBhTabGroup class="flex w-full flex-col gap-4">
    <BitBhTabList class="flex border-b border-zinc-200 gap-1">
        <BitBhTab
               class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">
            <Template Context="t">
                <span>Messages</span>
                <span class="@($"ml-2 rounded-full px-1.5 py-0.5 text-xs font-semibold {(t.IsSelected ? "bg-blue-600 text-white" : "bg-zinc-200 text-zinc-600")}")">12</span>
            </Template>
        </BitBhTab>
        <BitBhTab
               class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">
            <Template Context="t">
                <span>Mentions</span>
                <span class="@($"ml-2 rounded-full px-1.5 py-0.5 text-xs font-semibold {(t.IsSelected ? "bg-blue-600 text-white" : "bg-zinc-200 text-zinc-600")}")">3</span>
            </Template>
        </BitBhTab>
        <BitBhTab
               class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">
            <Template Context="t">
                <span>All</span>
            </Template>
        </BitBhTab>
    </BitBhTabList>
    <BitBhTabPanels class="mt-2">
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Direct messages</p></BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Mentions of you</p></BitBhTabPanel>
        <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Everything together</p></BitBhTabPanel>
    </BitBhTabPanels>
</BitBhTabGroup>

Controlled

SelectedIndex + OnSelectedIndexChange.

SelectedIndex: 0

First panel

<div class="flex flex-col gap-4 w-full">
    <div class="flex flex-wrap items-center gap-3">
        @for (var i = 0; i < 3; i++)
        {
            var captured = i;
            <BitBhButton OnClick="() => selectedIndex = captured"
                      class="@($"inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium cursor-pointer {(selectedIndex == captured ? "bg-blue-600 border-blue-600 text-white hover:bg-blue-700" : "bg-white border-zinc-200 text-zinc-900 hover:bg-zinc-100")}")">
                Select tab @(captured + 1)
            </BitBhButton>
        }
        <span class="text-sm text-zinc-500">SelectedIndex: <strong class="text-zinc-900">@selectedIndex</strong></span>
    </div>
    <BitBhTabGroup SelectedIndex="@selectedIndex" OnSelectedIndexChange="i => selectedIndex = i" class="flex w-full flex-col gap-4">
        <BitBhTabList class="flex border-b border-zinc-200 gap-1">
            <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Tab 1</BitBhTab>
            <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Tab 2</BitBhTab>
            <BitBhTab class="cursor-pointer border-0 bg-transparent border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-zinc-500 outline-none transition-colors box-border hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-600 focus-visible:rounded data-state-active:text-blue-600 data-state-active:border-blue-600 data-disabled:opacity-40 data-disabled:cursor-not-allowed">Tab 3</BitBhTab>
        </BitBhTabList>
        <BitBhTabPanels class="mt-2">
            <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">First panel</p></BitBhTabPanel>
            <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Second panel</p></BitBhTabPanel>
            <BitBhTabPanel class="py-2 text-zinc-900"><p class="text-sm text-zinc-500">Third panel</p></BitBhTabPanel>
        </BitBhTabPanels>
    </BitBhTabGroup>
</div>

@code {
    private int selectedIndex;
}