# Pivot
**Also known as:** Tab, TabPage
## Description
The Pivot switches between two or more distinct sections of content from a single row (or column) of headers, where selecting a header shows the section it belongs to. Headers can carry an icon, a count and a dismiss button, be added to and dragged into a new order, run along any of the four sides, and fold into an overflow menu, a scroll area, a pair of slide buttons or extra lines when there is no room for all of them. The selection is a key you can bind, a change can be called off before it happens, and the whole header is a single tab stop that the arrow, Home and End keys navigate, as the WAI-ARIA tabs pattern describes.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Addable | `bool` | false | Renders a button at the end of the pivot items that reports a request for a new tab through the OnAdd callback. The pivot does not add an item itself, since the items belong to the markup that declares them, so the handler is what puts the new one into the list. |
| AddAriaLabel | `string?` | null | The aria-label of the add button of the pivot (default: Add). |
| AddIcon | `BitIconInfo?` | null | Gets or sets the icon of the add button of the pivot using custom CSS classes for external icon libraries. Takes precedence over AddIconName when both are set. |
| AddIconName | `string?` | null | Gets or sets the name of the icon of the add button of the pivot from the built-in Fluent UI icons (default: Add). |
| AddTitle | `string?` | null | The title (tooltip) of the add button of the pivot (default: Add). |
| Alignment | `BitAlignment?` | null | Determines the alignment of the header section of the pivot. |
| AriaLabelledBy | `string?` | null | The id of the element that labels the header of the pivot (rendered into the aria-labelledby of the tablist), which is what names a pivot sitting under a heading of its own. It wins over the AriaLabel. |
| AutoHideSlideButtons | `bool` | false | Renders the next and previous buttons of the Slide overflow behavior only while there actually is something to slide to, instead of leaving them in place in their disabled state. |
| ChildContent | `RenderFragment?` | null | The content of pivot. |
| Classes | `BitPivotClassStyles?` | null | Custom CSS classes for different parts of the pivot. |
| Color | `BitColor?` | null | The general color of the pivot. |
| DefaultSelectedKey | `string?` | null | Default selected key for the pivot. |
| DismissAriaLabelFormat | `string?` | null | The format of the aria-label of the dismiss button of the pivot items (default: "Remove {0}"), where the placeholder is filled with the header text of the item. |
| DismissIcon | `BitIconInfo?` | null | Gets or sets the icon of the dismiss button of the pivot items using custom CSS classes for external icon libraries. Takes precedence over DismissIconName when both are set. |
| DismissIconName | `string?` | null | Gets or sets the name of the icon of the dismiss button of the pivot items from the built-in Fluent UI icons (default: Cancel). |
| Dismissible | `bool` | false | Renders a dismiss button on every pivot item, which reports the item to dismiss through the OnItemDismiss callback. A single item opts in or out of it on its own using the Dismissible parameter of the BitPivotItem. |
| DismissTitle | `string?` | null | The title (tooltip) of the dismiss button of the pivot items (default: Remove). |
| FullWidth | `bool` | false | Stretches the pivot items to share the whole width (or the whole height in a vertical pivot) of the header. |
| Gap | `string?` | null | The gap between the pivot items of the header. |
| HeaderEnd | `RenderFragment?` | null | The content rendered at the end of the header, after the pivot items and after the overflow or slide affordances, which is where the actions belonging to the whole pivot usually go. |
| HeaderOnly | `bool` | false | Whether to skip rendering the tabpanel with the content of the selected tab. |
| HeaderStart | `RenderFragment?` | null | The content rendered at the start of the header, before the pivot items and before the overflow or slide affordances. |
| HeaderType | `BitPivotHeaderType` | BitPivotHeaderType.Link | The type of the pivot header items. |
| KeepMounted | `bool` | false | Keeps the content of every tab that has been shown at least once mounted, so that leaving a tab and coming back to it finds the content in the state it was left in. Unlike MountAll, a tab that has never been selected is not rendered at all. |
| Loop | `bool` | true | Wraps the keyboard navigation of the header around at both of its ends, so that the next key on the last item lands on the first one. |
| MountAll | `bool` | false | Mounts all tabs at render time and hide non-selected tabs with CSS styles instead of not-rendering them (useful for processing/extracting data). |
| Navigable | `bool` | true | Enables the roving tabindex behavior, which turns the whole header into a single tab stop that is navigable using the arrow, Home, and End keys. |
| NextAriaLabel | `string?` | null | The aria-label of the next button in the Slide overflow behavior (default: Next). |
| NextIcon | `BitIconInfo?` | null | Gets or sets the icon of the next button in the Slide overflow behavior using custom CSS classes for external icon libraries. Takes precedence over NextIconName when both are set. |
| NextIconName | `string?` | null | Gets or sets the name of the icon of the next button in the Slide overflow behavior from the built-in Fluent UI icons (default: ChevronRight for horizontal pivots and ChevronDown for vertical pivots). |
| OnAdd | `EventCallback` | | Callback for when the add button of an Addable pivot is clicked. |
| OnChange | `EventCallback<BitPivotItem>` | | Callback for when the selected pivot item changes. |
| OnChanging | `EventCallback<BitPivotChangeArgs>` | | Callback for just before the selected pivot item changes, which can call the change off by setting the Cancel of its arguments, so that a tab holding unsaved work can refuse to be left. |
| OnItemClick | `EventCallback<BitPivotItem>` | | Callback for when a pivot header item is clicked. |
| OnItemDismiss | `EventCallback<BitPivotItem>` | | Callback for when the dismiss button of a pivot item is clicked, or the Delete key is pressed while it holds the focus. The pivot does not remove the item itself, since the items belong to the markup that declares them, so the handler is what takes the item out of the list. |
| OnItemReorder | `EventCallback<BitPivotReorderEventArgs>` | | Callback for when a pivot item is dragged onto another one, or moved with the Ctrl+Arrow keys, in a Reorderable pivot. The pivot does not move the item itself, since the items belong to the markup that declares them, so the handler is what reorders the list. |
| OverflowAriaLabel | `string?` | null | The aria-label of the overflow menu button in the Menu overflow behavior. |
| OverflowBehavior | `BitPivotOverflowBehavior?` | null | Overflow behavior when there is not enough room to display all of the links/tabs. |
| OverflowIcon | `BitIconInfo?` | null | Gets or sets the icon of the overflow menu button in the Menu overflow behavior using custom CSS classes for external icon libraries. Takes precedence over OverflowIconName when both are set. |
| OverflowIconName | `string?` | null | Gets or sets the name of the icon of the overflow menu button in the Menu overflow behavior from the built-in Fluent UI icons (default: More). |
| Position | `BitPivotPosition` | BitPivotPosition.Top | Position of the pivot header. |
| PreviousAriaLabel | `string?` | null | The aria-label of the previous button in the Slide overflow behavior (default: Previous). |
| PreviousIcon | `BitIconInfo?` | null | Gets or sets the icon of the previous button in the Slide overflow behavior using custom CSS classes for external icon libraries. Takes precedence over PreviousIconName when both are set. |
| PreviousIconName | `string?` | null | Gets or sets the name of the icon of the previous button in the Slide overflow behavior from the built-in Fluent UI icons (default: ChevronLeft for horizontal pivots and ChevronUp for vertical pivots). |
| Reorderable | `bool` | false | Lets the pivot items be dragged onto one another, and the focused one be moved with the Ctrl+Arrow keys, to ask for a new order through the OnItemReorder callback. A single item opts in or out of it on its own using the Reorderable parameter of the BitPivotItem. |
| SelectedKey | `string?` | null | Key of the selected pivot item. |
| SelectOnFocus | `bool` | false | Selects the focused pivot item while the header is navigated with the keyboard, so that the selection follows the focus (the automatic activation of the WAI-ARIA tabs pattern). |
| Size | `BitSize?` | null | The size of the pivot header items. |
| Stacked | `bool` | false | Stacks the icon of the pivot items on top of their text instead of putting the two side by side. |
| Styles | `BitPivotClassStyles?` | null | Custom CSS styles for different parts of the pivot. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| SelectedItem | `BitPivotItem?` | null | The pivot item that is currently selected. |
| Items | `IReadOnlyList<BitPivotItem>` | | The pivot items in the order they are declared in. |
| SelectItemByKey | `Task SelectItemByKey(string? key)` | | Selects the pivot item carrying the given key, if such an item exists and is enabled. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitAlignment Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Start | 0 | |
| End | 1 | |
| Center | 2 | |
| SpaceBetween | 3 | |
| SpaceAround | 4 | |
| SpaceEvenly | 5 | |
| Baseline | 6 | |
| Stretch | 7 | |
### BitPivotHeaderType Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Tab | 0 | Renders pivot header items as Tab. |
| Link | 1 | Renders pivot header items as link. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitPivotOverflowBehavior Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| None | 0 | Pivot links will overflow the container and may not be visible. |
| Menu | 1 | Display an overflow menu that contains the tabs that don't fit. |
| Scroll | 2 | Display a scroll bar below of the tabs for moving between them. |
| Slide | 3 | Display next and previous buttons to slide through the tabs that don't fit. |
| Wrap | 4 | Wrap the tabs that don't fit onto as many extra lines (or columns) as they need. |
### BitPivotPosition Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Top | 0 | Display header at the top. |
| Bottom | 1 | Display header at the Bottom. |
| Start | 2 | Display header at the start (Left for LTR and Right for RTL). |
| End | 3 | Display header at the end (Right for LTR and Left for RTL). |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitPivotItem Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Body | `RenderFragment?` | null | The content of the pivot item, It can be Any custom tag or a text (alias of ChildContent). |
| BodyClass | `string?` | null | The custom css class of the content of the pivot item. |
| BodyStyle | `string?` | null | The custom css style of the content of the pivot item. |
| ChildContent | `RenderFragment?` | null | The content of the pivot item, It can be Any custom tag or a text. |
| Dismissible | `bool?` | null | Overrides the Dismissible of the parent pivot for this item alone, so a single tab can gain or lose its dismiss button independently of the rest. |
| Header | `RenderFragment?` | null | The content of the pivot item header, It can be Any custom tag or a text. |
| HeaderText | `string?` | null | The text of the pivot item header, The text displayed of each pivot link. |
| Icon | `BitIconInfo?` | null | Gets or sets the icon to display next to the pivot link using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | `string?` | null | Gets or sets the name of the icon to display next to the pivot link from the built-in Fluent UI icons. |
| ItemCount | `int?` | null | Defines an optional item count displayed in parentheses just after the link text. |
| IsSelected | `bool` | false | Whether or not the item is selected. An item that declares itself selected takes the selection of the pivot when it is registered. |
| Key | `string?` | null | A required key to uniquely identify a pivot item. |
| OnClick | `EventCallback` | | Callback for when this pivot item header is clicked or activated from the keyboard. |
| OnDismiss | `EventCallback` | | Callback for when the dismiss button of this pivot item is clicked, or the Delete key is pressed while it holds the focus. |
| Reorderable | `bool?` | null | Overrides the Reorderable of the parent pivot for this item alone, so a single tab can be pinned in place while the rest of the header is reordered, or the other way around. |
| Title | `string?` | null | The title (tooltip) of the pivot item header, which is the usual place for the full text of a header that is too long to be shown in one. |
### BitPivotChangeArgs Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Item | `BitPivotItem` | | The pivot item the selection is about to move to. |
| Cancel | `bool` | false | Set to true to cancel the change and keep the item that is currently selected. |
### BitPivotReorderEventArgs Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Item | `BitPivotItem` | | The pivot item that is being moved. |
| OldIndex | `int` | 0 | The index the item is moving from. |
| NewIndex | `int` | 0 | The index the item is moving to. |
### BitPivotClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitPivot. |
| Header | `string?` | null | Custom CSS classes/styles for the header of the BitPivot. |
| HeaderContainer | `string?` | null | Custom CSS classes/styles for the header container (wrapper) of the BitPivot. |
| SlideButton | `string?` | null | Custom CSS classes/styles for the slide (next/previous) buttons of the BitPivot in the Slide overflow behavior. |
| OverflowButton | `string?` | null | Custom CSS classes/styles for the overflow menu button of the BitPivot in the Menu overflow behavior. |
| OverflowCallout | `string?` | null | Custom CSS classes/styles for the overflow menu (callout) of the BitPivot in the Menu overflow behavior. |
| OverflowItem | `string?` | null | Custom CSS classes/styles for the overflow menu item of the BitPivot in the Menu overflow behavior. |
| Body | `string?` | null | Custom CSS classes/styles for the items body of the BitPivot. |
| HeaderItem | `string?` | null | Custom CSS classes/styles for the header item of the BitPivot. |
| SelectedItem | `string?` | null | Custom CSS classes/styles for the selected item of the BitPivot. |
| HeaderItemContent | `string?` | null | Custom CSS classes/styles for the header item content of the BitPivot. |
| HeaderIconContainer | `string?` | null | Custom CSS classes/styles for the header icon container of the BitPivot. |
| HeaderIcon | `string?` | null | Custom CSS classes/styles for the header icon of the BitPivot. |
| HeaderText | `string?` | null | Custom CSS classes/styles for the header text of the BitPivot. |
| HeaderItemCount | `string?` | null | Custom CSS classes/styles for the header item count of the BitPivot. |
| HeaderStart | `string?` | null | Custom CSS classes/styles for the start content of the header of the BitPivot. |
| HeaderEnd | `string?` | null | Custom CSS classes/styles for the end content of the header of the BitPivot. |
| DismissButton | `string?` | null | Custom CSS classes/styles for the dismiss button of the header items of the BitPivot. |
| DismissIcon | `string?` | null | Custom CSS classes/styles for the dismiss icon of the header items of the BitPivot. |
| AddButton | `string?` | null | Custom CSS classes/styles for the add button of the BitPivot. |
| AddIcon | `string?` | null | Custom CSS classes/styles for the add icon of the BitPivot. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## Examples
\n**Basic**:
```razor
```
\n**Icon and Count**:
```razor
```
\n**Position**:
```razor
...
...
...
...
...
...
...
...
...
```
\n**Overflow**:
```razor
Content of the File tab.
Content of the Shared with me tab.
Content of the Recent tab.
Content of the Favorites tab.
Content of the Documents tab.
Content of the Pictures tab.
Content of the Downloads tab.
Content of the File tab.
Content of the Shared with me tab.
Content of the Recent tab.
Content of the Favorites tab.
Content of the Documents tab.
Content of the Pictures tab.
Content of the Downloads tab.
Content of the File tab.
Content of the Shared with me tab.
Content of the Recent tab.
Content of the Favorites tab.
Content of the Documents tab.
Content of the Pictures tab.
Content of the Downloads tab.
Content of the File tab.
Content of the Shared with me tab.
Content of the Recent tab.
Content of the Favorites tab.
Content of the Documents tab.
Content of the Pictures tab.
Content of the Downloads tab.
Content of the File tab.
Content of the Shared tab.
Content of the Recent tab.
Content of the File tab.
Content of the Shared with me tab.
Content of the Recent tab.
Content of the Favorites tab.
Content of the Documents tab.
Content of the Pictures tab.
Content of the Downloads tab.
Content of the File tab.
Content of the Shared with me tab.
Content of the Recent tab.
Content of the Favorites tab.
Content of the Documents tab.
Content of the Pictures tab.
Content of the Downloads tab.
Content of the File tab.
Content of the Shared with me tab.
Content of the Recent tab.
Content of the Favorites tab.
Content of the Documents tab.
Content of the Pictures tab.
Content of the Downloads tab.
```
\n**Header content**:
```razor
```
\n**Dismissible**:
```razor
@foreach (var tab in dismissibleTabs)
{
}
Reset
```
```csharp
private List dismissibleTabs = ["Home", "Documents", "Pictures", "Settings"];
private void ResetDismissibleTabs() => dismissibleTabs = ["Home", "Documents", "Pictures", "Settings"];
```
\n**Keyboard**:
```razor
```
\n**Binding**:
```razor
Prev
Next
```
```csharp
private string? detachedSelectedKey = "Foo";
```
\n**Events**:
```razor
Header #1
Header #2
Header
#3
```
\n**Disabled**:
```razor
```
\n**Reorderable**:
```razor
@foreach (var tab in reorderableTabs)
{
}
```
```csharp
private List reorderableTabs = ["File", "Shared", "Recent", "Favorites"];
private void HandleReorder(BitPivotReorderEventArgs args)
{
var oldIndex = reorderableTabs.IndexOf(args.Item.Key!);
var newIndex = args.NewIndex;
if (oldIndex < 0 || newIndex < 0 || newIndex >= reorderableTabs.Count) return;
reorderableTabs.RemoveAt(oldIndex);
reorderableTabs.Insert(newIndex, args.Item.Key!);
}
```
\n**Mounting**:
```razor
```
\n**Addable**:
```razor
@foreach (var tab in addableTabs)
{
}
addableTabs = ["Tab 1", "Tab 2", "Tab 3"];
private void AddPivotTab()
{
var key = $"Tab {++addableTabCount}";
addableTabs.Add(key);
addableSelectedKey = key;
}
```
\n**External Icons**:
```razor
```
\n**Style & Class**:
```razor
```
\n**RTL**:
```razor
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها به پایان رسد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها به پایان رسد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها به پایان رسد.
```
Pivot #1: File
Everything that has been saved to this workspace, newest first.
Pivot #2: Shared with me
The files other people have given you access to, grouped by who shared them.
Pivot #3: Recent
The documents you have opened over the last few days.
Pivot #1: Files
Everything that has been saved to this workspace, newest first.
Pivot #2: Shared with me
The files other people have given you access to, grouped by who shared them.
Pivot #3: Recent
The documents you have opened over the last few days.
Pivot #1: File
Everything that has been saved to this workspace, newest first.
Pivot #2: Shared
The files other people have given you access to.
Pivot #3: Recent
The documents you have opened over the last few days.
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Content of the @tab tab.
Pivot #1: Home
Pivot #2: Documents
Pivot #3: Pictures
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Pivot #1: Samples
Pivot #2: Files
Pivot #3: Recent
Pivot #4: Last
Selected key: @selectedKey
```
```csharp
private string selectedKey = "1";
```
\n**Detached**:
```razor
@if (detachedSelectedKey == "Foo")
{
Hello I am Fooooooooooooo
}
else if (detachedSelectedKey == "Bar")
{
Hello I am Barrrrrrrrrrrr
}
else if (detachedSelectedKey == "Bas")
{
Hello I am Bassssssssssss
}
else if (detachedSelectedKey == "Biz")
{
Hello I am Bizzzzzzzzzzzz
}
Pivot #1: Foo
Pivot #2: Bar
Pivot #3: Bas
Pivot #4: Biz (counts its own clicks)
Last changed to: @changedPivotItem?.HeaderText
Last header clicked: @clickedPivotItem?.HeaderText
Clicks on the Biz header: @itemClickCount
Pivot #1: Draft
Pivot #2: Preview
Pivot #3: History
Last refused: @refusedPivotItem?.HeaderText
```
```csharp
private int itemClickCount;
private bool lockHistoryTab = true;
private BitPivotItem? changedPivotItem;
private BitPivotItem? clickedPivotItem;
private BitPivotItem? refusedPivotItem;
private void HandleChanging(BitPivotChangeArgs args)
{
refusedPivotItem = null;
if (lockHistoryTab is false || args.Item.HeaderText != "History") return;
args.Cancel = true;
refusedPivotItem = args.Item;
}
```
\n**Templates**:
```razor
Pivot #1
The content of the first item, given through the Body template.
Pivot #2
A custom header keeps the item count that follows it.
Pivot #3
An icon still comes before a custom header.
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared
Pivot #3: Recent
Content of the @tab tab.
This tab stays where it is.
Content of the @tab tab.
Selected key: @addableSelectedKey
```
```csharp
private int addableTabCount = 3;
private string? addableSelectedKey = "Tab 1";
private ListPivot #1: Home
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge.
Pivot #2: Heart
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
Pivot #3: Rocket
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead.
Pivot #1: Home
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge.
Pivot #2: Heart
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
Pivot #3: Gear
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead.
Pivot #1: File
Pivot #2: Shared with me
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared with me
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared with me
Pivot #3: Recent
Pivot #1: File
Pivot #2: Shared with me
Pivot #3: Recent