Basic Usage

Declare BnTabItem elements inside the <Items> render fragment. Each item requires a Label and a <Content> render fragment. The first tab is selected by default.

Default Selected Tab

Set DefaultTabIndex to open a specific tab on first render. The index is zero-based and matches the declaration order of the BnTabItem elements.

Custom Header Template

Replace the plain label text with any markup by providing a <HeaderTemplate>. This is useful for adding icons, badges, or other decorations to a tab header.

Disabled Tabs

Set IsEnabled="false" on a BnTabItem to render its header in a disabled state. Disabled tabs cannot be selected by the user and are excluded from keyboard navigation.

Scrollable Headers

When the tab strip contains more headers than can fit in the available width, it scrolls horizontally. No configuration is required — BnTab handles overflow automatically. Each tab header is rendered with whitespace-nowrap to prevent label wrapping.

Programmatic Control

Hold a reference to the BnTab instance via @ref and call SelectTab(BnTabItem) to switch tabs from code. You can also call IsSelected(BnTabItem) to query the current selection.

@* Hold a reference to call methods directly *@
<BnTab @ref="_tabs">
    <Items>
        <BnTabItem @ref="_tab1" Label="Tab 1">...</BnTabItem>
        <BnTabItem @ref="_tab2" Label="Tab 2">...</BnTabItem>
    </Items>
</BnTab>

@code {
    BnTab     _tabs;
    BnTabItem _tab1, _tab2;

    void GoToSecond() => _tabs.SelectTab(_tab2);
}

Style Override

Pass a ContainerModifier to override the outer container's default flex flex-col styles. The surface-aware colours and the scrollable header behaviour are always applied regardless of the modifier.

// Constrain the tab control to a fixed height and clip overflow
<BnTab ContainerModifier="@BnModifier.Create(x => x.flex.flex_col.h_[400px].overflow_hidden)">
    ...
</BnTab>

BnTab Parameters

• Items (RenderFragment) — Container for BnTabItem declarations.
• DefaultTabIndex (int, default 0) — Zero-based index of the initially selected tab.
• OnTabChanged (EventCallback<BnTabItem>) — Raised whenever the active tab changes.
• ContainerModifier (BnModifier) — Override styles on the outer container div.

BnTabItem Parameters

• Label (string) — Text shown in the tab header button.
• Content (RenderFragment) — Content rendered when this tab is active.
• HeaderTemplate (RenderFragment) — Replaces the default label text with custom markup.
• IsEnabled (bool, default true) — When false, the header is disabled and the tab cannot be selected.

How It Works

BnTab cascades a reference to itself as a CascadingValue. Each BnTabItem receives this reference via a [CascadingParameter] and calls RegisterTab(this) during OnInitialized.

BnTabItem produces no rendered output — it is purely a declarative configuration component. BnTab owns all rendering: it builds the header strip from its registered tab list and renders the selected tab's Content render fragment inside a BnSurface, ensuring the content area inherits the correct surface depth and colour tokens.