Default Theme

Pivot

Overview

The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.

Tapping on a pivot item header navigates to that header's section content.

Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.

Usage

Default Pivot

<Pivot AriaLabel="Basic Pivot Example">
    <PivotItem HeaderText="My Files">
        <Label Style="margin-top:10px">Pivot #1</Label>
    </PivotItem>
    <PivotItem HeaderText="Recent">
        <Label Style="margin-top:10px">Pivot #2</Label>
    </PivotItem>
    <PivotItem HeaderText="Shared with me">
        <Label Style="margin-top:10px">Pivot #3</Label>
    </PivotItem>
</Pivot>

Count nd Icon

<div>
    <Pivot AriaLabel="Count and Icon Pivot Example">
        <PivotItem HeaderText="My Files" ItemCount="42" IconName="Emoji2">
            <Label Style="margin-top:10px">Pivot #1</Label>
        </PivotItem>
        <PivotItem ItemCount="23" IconName="Recent">
            <Label Style="margin-top:10px">Pivot #2</Label>
        </PivotItem>
        <PivotItem HeaderText="Placeholder" IconName="Globe">
            <Label Style="margin-top:10px">Pivot #3</Label>
        </PivotItem>
        <PivotItem HeaderText="Shared with me" IconName="Ringer" ItemCount="1">
            <Label Style="margin-top:10px">Pivot #4</Label>
        </PivotItem>
    </Pivot>

</div>

Large link size


<div>
    <Pivot AriaLabel="Large Link Size Pivot Example" LinkSize=PivotLinkSize.Large>
        <PivotItem HeaderText="My Files">
            <Label>Pivot #1</Label>
        </PivotItem>
        <PivotItem HeaderText="Recent">
            <Label>Pivot #2</Label>
        </PivotItem>
        <PivotItem HeaderText="Shared with me">
            <Label>Pivot #3</Label>
        </PivotItem>
    </Pivot>
</div>

Links of tab style

<div>
    <Pivot AriaLabel="Links of Tab Style Pivot Example" LinkFormat=PivotLinkFormat.Tabs>
        <PivotItem HeaderText="Foo">
            <Label>Pivot #1</Label>
        </PivotItem>
        <PivotItem HeaderText="Bar">
            <Label>Pivot #2</Label>
        </PivotItem>
        <PivotItem HeaderText="Bas">
            <Label>Pivot #3</Label>
        </PivotItem>
        <PivotItem HeaderText="Biz">
            <Label>Pivot #4</Label>
        </PivotItem>
    </Pivot>
</div>

Links of large tab style

<div>
    <Pivot AriaLabel="Links of Large Tabs Pivot Example" LinkFormat=PivotLinkFormat.Tabs LinkSize=PivotLinkSize.Large>
        <PivotItem HeaderText="Foo">
            <Label>Pivot #1</Label>
        </PivotItem>
        <PivotItem HeaderText="Bar">
            <Label>Pivot #2</Label>
        </PivotItem>
        <PivotItem HeaderText="Bas">
            <Label>Pivot #3</Label>
        </PivotItem>
        <PivotItem HeaderText="Biz">
            <Label>Pivot #4</Label>
        </PivotItem>
    </Pivot>
</div>

Trigger onchange event


@if (!string.IsNullOrWhiteSpace(PivotItemKey))
{
    @($"{PivotItemKey} was clicked!")
}
<div>
    <Pivot AriaLabel="OnChange Pivot Example"
           LinkSize=PivotLinkSize.Large
           LinkFormat=PivotLinkFormat.Tabs
           OnLinkClick=OnLinkClick>
        <PivotItem HeaderText="Foo">
            <Label>Pivot #1</Label>
        </PivotItem>
        <PivotItem HeaderText="Bar">
            <Label>Pivot #2</Label>
        </PivotItem>
        <PivotItem HeaderText="Bas">
            <Label>Pivot #3</Label>
        </PivotItem>
        <PivotItem HeaderText="Biz">
            <Label>Pivot #4</Label>
        </PivotItem>
    </Pivot>
</div>

Override selected item

<div>
    <Pivot AriaLabel="Override Selected Item Pivot Example" @bind-SelectedKey=overrideSelectedKey>
        <PivotItem HeaderText="My Files" ItemKey="0">
            <Label>Pivot #1</Label>
        </PivotItem>
        <PivotItem HeaderText="Recent" ItemKey="1">
            <Label>Pivot #2</Label>
        </PivotItem>
        <PivotItem HeaderText="Shared with me" ItemKey="2">
            <Label>Pivot #3</Label>
        </PivotItem>
    </Pivot>
    <DefaultButton OnClick=RotateSelection>Select next item</DefaultButton>
</div>

Renden content separately

<div>
    <div role="tabpanel"
         style="
            float: left;
            width: 100px;
            height: @(separateSelectedKey == "squareRed" ? "100px" : "200px");
            background: @(separateSelectedKey == "rectangleGreen" ? "green" : "red")" />
    <Pivot AriaLabel="Separately Rendered Content Pivot Example"
           @bind-SelectedKey=separateSelectedKey
           HeadersOnly=true>
        <PivotItem HeaderText="Rectangle red" ItemKey="rectangleRed" />
        <PivotItem HeaderText="Square red" ItemKey="squareRed" />
        <PivotItem HeaderText="Rectangle green" ItemKey="rectangleGreen" />
    </Pivot>
</div>