TabMenu

TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.


import { TabMenuModule } from 'primeng/tabmenu';

TabMenu requires a collection of menuitems as its model.


<p-tabMenu [model]="items" />

For controlled mode, use activeItem property along with activeItemChange event are needed to manage the active item.


<div class="flex mb-2 gap-2 justify-content-end">
    <p-button 
        (onClick)="activeItem = items[0]" 
        [rounded]="true" 
        label="1" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeItem !== items[0]" />
    <p-button 
        (onClick)="activeItem = items[1]" 
        [rounded]="true" 
        label="2" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeItem !== items[1]" />
    <p-button 
        (onClick)="activeItem = items[2]" 
        [rounded]="true" 
        label="3" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeItem !== items[2]" />
</div>
<p-tabMenu 
    [model]="items" 
    [activeItem]="activeItem" 
    (activeItemChange)="onActiveItemChange($event)" />

TabMenu supports templating via the item template which gets the menuitem instance and the index.


<p-tabMenu [model]="items" [activeItem]="activeItem">
    <ng-template pTemplate="item" let-item>
        <a pRipple class="flex align-items-center gap-2 p-menuitem-link">
            <img 
                [alt]="item.name" 
                [src]="'https://primefaces.org/cdn/primeng/images/demo/avatar/' + item.image" 
                style="width: 32px" />
            <span class="font-bold">
                {{ item.name }}
            </span>
        </a>
    </ng-template>
</p-tabMenu>

The command property defines the callback to run when an item is activated by click or a key event.


<p-toast />
<p-tabMenu [model]="items" />

Items with navigation are defined with templating to be able to use a router link directive, an external link or programmatic navigation.


<p-tabMenu [model]="items">
    <ng-template pTemplate="item" let-item>
        <ng-container *ngIf="item.route; else elseBlock">
            <a [routerLink]="item.route" class="p-menuitem-link">
                <span [class]="item.icon"></span>
                <span class="ml-2">
                    {{ item.label }}
                </span>
            </a>
        </ng-container>
        <ng-template #elseBlock>
            <a [href]="item.url" class="p-menuitem-link">
                <span [class]="item.icon"></span>
                <span class="ml-2">
                    {{ item.label }}
                </span>
            </a>
        </ng-template>
    </ng-template>
</p-tabMenu>

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-tabmenuContainer element.
p-tabmenu-navList element of headers.
p-tabmenuitemMenuitem element.
p-menuitem-linkLink inside a menuitem.
p-menuitem-textLabel of a menuitem.
p-menuitem-iconIcon of a menuitem.

Screen Reader

TabMenu component uses the menubar role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled.

Keyboard Support

KeyFunction
tabAdds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.
enterActivates the focused tab header.
spaceActivates the focused tab header.
right arrowMoves focus to the next header.
left arrowMoves focus to the previous header.
homeMoves focus to the first header.
endMoves focus to the last header.