A pivot is a list of BitPivotItems, each one a header and the content it shows. The first item that can be selected takes the selection to begin with, and selecting a header swaps the content underneath it. The whole header is a single tab stop: once it holds the focus, the arrow keys move between the tabs and Home and End jump to either end.

A header can carry an icon before its text through IconName, and a number in parentheses after it through ItemCount, which is the usual way of telling how much a section holds without opening it. Both are optional and can be used on their own.

The HeaderType picks the shape of the headers: Link (the default) marks the selected one with an animated indicator under it, while Tab fills the selected one with the color of the pivot. Link suits a page of content, Tab suits a denser panel where the selection has to survive a quick glance.

Link (default):

Tab:

Stacked puts the icon of each header above its text instead of beside it, which is what makes a row of tabs fit a narrow screen without cutting the labels. It only changes the layout of the headers, so everything else on the pivot keeps working as it does.

FullWidth shares the whole width of the header between the items instead of leaving them huddled at one edge, which turns a handful of tabs into a segmented control. In a vertical pivot it shares the height in the same way, and Gap is what leaves room between the stretched items when they should read as separate rather than joined.

The Alignment decides where the headers sit along the header line when they do not fill it, taking any value of the BitAlignment enum. Use FullWidth instead when the headers should share the whole line rather than be pushed to one side of it.

Start (default):

Center:

End:

SpaceBetween:

The Position moves the header to any of the four sides of the content: Top (the default), Bottom, Start and End. Start and End lay the headers out in a column and turn the selection indicator on its side, and the tablist reports itself as vertical so that the up and down arrows are what navigate it.

Pivot Position: Top

Pivot Position: Bottom

Pivot Position: Start

Pivot Position: End

The OverflowBehavior decides what happens when the headers no longer fit: Menu folds the ones that do not fit into a menu behind a More button, Slide adds a pair of buttons that scroll the header along, Scroll leaves a scroll bar under (or beside) it, Wrap runs them onto as many extra lines as they need, and None (the default) simply lets them overflow. Selecting a tab from the keyboard or from the bound key brings it back into view in the Scroll and Slide behaviors, including the tab the pivot starts on. The Slide header hides its scroll bar, so the mouse wheel over it moves it along instead of scrolling the page past it, and the page gets the wheel back at either end. The More button of the Menu behavior answers to the keys of a menu - the arrows step through it, Home and End jump to either end, Enter selects and Escape closes it, and Escape or a click away hands the focus back to the button - and it marks itself as the selected one while it is the selected tab that is folded away.

Menu (overflown tabs are moved into an overflow menu):

Slide (next and previous buttons slide through the tabs):

Scroll (a scroll bar is shown below the tabs):

Wrap (the tabs that do not fit run onto the next line):

AutoHideSlideButtons takes the slide buttons away entirely while the whole header fits, instead of leaving them in place in their disabled state:

The overflow behavior also works with a vertical header (Position set to Start or End). A constrained height is required for the header to overflow vertically.

Menu (vertical):

Slide (vertical):

Scroll (vertical):

HeaderStart and HeaderEnd put content of your own at either end of the header line, beside the tabs but outside the tablist, which is where the actions belonging to the whole pivot go. They keep their own place in the tab order, so the arrow keys still walk only the tabs.

Dismissible adds a dismiss button to every header (a single item overrides it through its own Dismissible), and the Delete key does the same from the keyboard. The pivot never removes an item on its own, because the items belong to the markup that declares them, so OnItemDismiss is what takes it out of the list. When the tab being removed is the selected one, the selection moves to its neighbour by itself, and so does the focus. DismissIconName, DismissTitle and DismissAriaLabelFormat are what the button is drawn and named with.

A single item opting out of the dismiss button of the pivot:

The header is one tab stop and the arrow keys move the focus inside it, wrapping around at both ends; Home and End jump to the first and last tab, Enter and Space select the focused one, and a vertical pivot swaps the horizontal arrows for the vertical ones (in a right-to-left pivot the horizontal arrows are mirrored). Disabled and hidden tabs are stepped over. Delete dismisses the focused tab of a Dismissible pivot and Ctrl with an arrow key moves it in a Reorderable one, so the header can be worked through without ever leaving the keyboard.

SelectOnFocus makes the selection follow the focus, so a tab is selected the moment the arrow keys reach it - the automatic activation of the WAI-ARIA tabs pattern, which suits sections that are cheap to show:

Navigable turned off gives every tab its own place in the tab order and takes the arrow keys out of the picture, for the rare case where the tabs are really a row of links:

Loop turned off stops the navigation at both ends of the header instead of wrapping it around, so the last tab is really the last one the arrow keys reach:

Give each item a Key and the selection becomes a value you own: @bind-SelectedKey follows the selection in both directions, while DefaultSelectedKey only picks the tab to start on and then leaves it alone. A key whose item is disabled or hidden is refused and the bound value goes back to the tab that is actually selected; a key nobody answers to is given until the end of the render to be answered, so adding a tab and selecting it can be one gesture. The pivot also hands over its SelectedItem and its Items, and takes a selection through SelectItemByKey, for the code that drives it from the outside.

Selected key: 1

HeaderOnly renders the header without the panel underneath it, so the pivot becomes a selector for content that lives somewhere else on the page entirely - a detail pane, a section further up, or anything the selected key drives.

OnChange reports every change of the selection, wherever it came from - a click, the keyboard, the overflow menu or the bound key - while OnItemClick only fires for a header the user actually activated, even when that header was already the selected one. An item can also carry its own OnClick, and a Title that becomes the tooltip of its header.

Last changed to:

Last header clicked:

Clicks on the Biz header: 0

OnChanging is asked just before the selection moves and calls the change off by setting the Cancel of its arguments, which is what a tab holding unsaved work, or one that is not ready to be shown, needs in order to refuse the selection. A change that is called off never reaches OnChange, and a bound key that was already moved goes back to the tab that is really selected:

Last refused:

Header replaces the text of a header with markup of your own, and Body is the named alias of the content of the item, which is what lets the two be told apart once a header template is in play. An item count still follows a custom header, and an icon still comes before it.

IsEnabled turns off the whole pivot, or a single item when it is set on the item itself. A disabled tab reports itself as such to assistive technologies, cannot be selected by a key that points at it, and is stepped over by the arrow keys.

Disabled pivot:

Disabled pivot item:

Disabled tab:

Disabled tab item:

Reorderable lets the headers be dragged onto one another, and the focused one be moved with Ctrl and an arrow key, so a header can be put in the order its user works in. Like the dismiss button, the pivot only asks: the items belong to the markup that declares them, so OnItemReorder hands over the item together with the index it is leaving and the index it is going to, and the handler is what moves it. A single item pins itself in place with its own Reorderable set to false.

By default only the selected tab is rendered, and leaving a tab throws its content away. KeepMounted keeps every tab that has been shown at least once around and hides it instead, so coming back to it finds the scroll position, the form and the state it was left in; a tab that has never been selected still costs nothing. MountAll goes further and renders every tab up front, which is what a page that has to read or export the content of the tabs it is not showing needs.

Type into the boxes, switch tabs and come back:

Default (the content of a tab that is left is thrown away):

KeepMounted (the content of a tab that has been shown is kept):

MountAll (every tab is rendered up front):

Addable puts a button after the last header that reports a request for a new tab through OnAdd. Like the dismiss button, the pivot only asks: the items belong to the markup that declares them, so the handler is what puts the new tab into the list and, through the bound key, what decides whether the pivot moves to it. The button sits beside the tablist rather than inside it, so the arrow keys still walk only the tabs, and AddIconName, AddTitle and AddAriaLabel are what it is drawn and named with.

Selected key: Tab 1

Gap sets the room left between the headers, taking any CSS length, which is what turns an airy row of tabs into a compact switch or the other way around. A vertical pivot spaces its column of headers with the same value.

Default:

Gap: 0

Gap: 2rem

Offering a range of specialized colors, providing visual cues for specific states within your application.

Using the Color parameter and its value of type BitColor enum:

Primary:

Secondary:

Tertiary:

Info:

Success:

Warning:

SevereWarning:

Error:

PrimaryBackground:

SecondaryBackground:

TertiaryBackground:

PrimaryForeground:

SecondaryForeground:

TertiaryForeground:

PrimaryBorder:

SecondaryBorder:

TertiaryBorder:

Tab - Primary:

Tab - Success:

Tab - Error:

Use icons from external libraries like FontAwesome, and Bootstrap Icons with the Icon parameter.

See the BitIconInfo section in the parameters table for usage.

FontAwesome:

Bootstrap:

The Size moves the headers along the type ramp - Small, Medium (the default) and Large - so a pivot can be the heading of a page or a quiet switch inside a panel without any styling of its own.

Small:

Medium (default):

Large:

Style and Class reach the root element of the pivot, while Styles and Classes reach every part of it by name - the header and its container, a header item and the selected one, the icon, the text, the count, the dismiss and add buttons, the overflow menu and its items, and the body of the panel. See the BitPivotClassStyles section of the parameters table for the full list.

Component's Style & Class:

Styles & Classes:

Setting Dir to Rtl mirrors the pivot: the headers run from the right, the selection indicator and the slide buttons follow, the Start and End positions swap sides, and the left and right arrow keys are mirrored along with them.